CODEWITHSUNDEEP
javascriptjquery
Laxmi Kadariya
Laxmi Kadariya

Reputation: 1103

Appending select option at the particular index

I have two select dropdowns as 

City:
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>

Street:
<select id="street" name="street">
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>

Here I wanted to have street B to be displayed only when city has value 1 and 2 . Thus I wrote a jQuery function with remove and append

$(function() {
  $('#city').change( function() {
    var val = $(this).val();

    if ((val != 2) && (val != 1)) {
      $("#street").find('[value="1.B"]').remove();
    }
    else {
     if( $("#street option[value='1.B']").length == 0)
     {
       $("#street").append(new Option("Street B", "1.B"));
     }
    }
  });
});

It's working as expected. However when once the option is removed and appended later, the option is appended at the end. Is there a technique that I can store the index before removal and later during appending , I can append at the particular index?

Scenario:

  1. If at first I select option Londra, then street B is removed.
  2. Select option 2 Leicester, street B should be appended. but the index should be preserved.

Upvotes: 0

Views: 57

Answers (3)

Nirmal Rijal
Nirmal Rijal

Reputation: 93

You can use the .eq() API provided by the jQuery and append at any desired location

$(function() {
  var currentIndex = $("#street option[value='1.B']").index();;
  $('#city').change(function() {
    var val = $(this).val();
    if ((val != 2) && (val != 1)) {
      $("#street").find('[value="1.B"]').remove();
    } else {
      if ($("#street option[value='1.B']").length == 0) {
        $("#street option").eq(currentIndex).before(new Option("Street B", "1.B"));
      }
    }
  });
});

Try demo here : https://jsfiddle.net/nirmalrizal/hymk165e/11/

Upvotes: 0

charlietfl
charlietfl

Reputation: 171698

You can store it's initial index and when you need to add it back add before() the option that is currently at that index

var $streetB = $("#street").find('[value="1.B"]'),
    streetBindex = $streetB.index();


$('#city').change(function() {
  var val = $(this).val();
  if ((val != 2) && (val != 1)) {
    $streetB = $("#street").find('[value="1.B"]').detach();
  } else {
    if ($("#street option[value='1.B']").length == 0) {
      $("#street option").eq(streetBindex).before($streetB.clone());
    }

  }


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
City:
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>
Street:
<select id="street" name="street" size=10>
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>

Upvotes: 2

Mehmet Baker
Mehmet Baker

Reputation: 1155

Use before or after instead:

$(function() {
  $('#city').change( function() {
    var val = $(this).val();
    if ((val != 2) && (val != 1)){

      $("#street").find('[value="1.B"]').remove();


    }
    else{
     if( $("#street option[value='1.B']").length == 0)
     {
       $("#street-c").before(new Option("Street B", "1.B"));
     }

    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
</head>

<body>
<select id="city" name="city">
  <option value="0">Select City</option>
  <option value="1">Manchester</option>
  <option value="2">Leicester</option>
  <option value="3">Londra</option>
</select>
<select id="street" name="street">
  <option value="1.A">Street A</option>
  <option value="1.B">Street B</option>
  <option id="street-c" value="1.C">Street C</option>
  <option value="2.D">Street D</option>
  <option value="2.E">Street E</option>
  <option value="2.F">Street F</option>
  <option value="3.G">Street G</option>
  <option value="3.H">Street H</option>
</select>
</body>
</html>

Upvotes: 0

Related Questions