CODEWITHSUNDEEP
javascriptjqueryhtml
Faruk
Faruk

Reputation: 169

Change options in same select based on selected option

As you can see first option (Option 1) is selected by default. What I want to do is if I select Option 2 to change their places (add Option 1 to list and set selected Option 2).

<select id="type" name="type" class="selectpicker" title="Option 1" value="1">
    <option>Option 2</option>
    <option>Option 3</option>
</select>

My try:

$('.selectpicker').change(function() {
     var currentOptionValue = $('select option:selected').text();

     if (currentOptionValue == 'Option 2') {
         $(".selectpicker option[value="Option 2"]").text('Option 1');
     }
});

Upvotes: 3

Views: 129

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Working fiddle.

I think that what you looking for :

$('.selectpicker').change(function() {
     var oldOptionText  = $('.selectpicker').attr('title');
     var oldOptionValue = $('.selectpicker').attr('value');

     var currentOptionText  = $('select option:selected').text();
     var currentOptionValue = $('select option:selected').attr('value');

     $('select option:selected').text(oldOptionText);
     $('select option:selected').attr('value', oldOptionValue);

     $('.selectpicker').attr('title', currentOptionText);
     $('.selectpicker').attr('value', currentOptionValue);
});

Hope this helps.

Upvotes: 2

MKAD
MKAD

Reputation: 457

i think you are loking for something like that?

   $('.selectpicker').change(function() {
     var currentOptionValue = $('select option:selected').text();

     if (currentOptionValue == 'Option 2') {
      $(".selectpicker").append(("<option>Option 1</option>"));

     }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type" name="type" class="selectpicker" title="Option 1" value="1">
    <option>Option 3</option>
    <option>Option 2</option>
</select>

Upvotes: 0

Related Questions