Reputation: 1103
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:
Upvotes: 0
Views: 57
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
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
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