Get HTML variant by value in JQuery
How can we get HTML option in jquery by this value in jQuery.
Html
<select multiple="" style="width: 147px;" id="list" name="list" class="list_class">
<option value="21">A</option>
<option value="22">B</option>
<option value="23">C</option>
<option value="24">D</option>
<option value="2">E</option>
</select>
Array
var id_arry = ['21','24','2'];
I have this array that has some values โโassociated with the values โโin the dropdown. Now I want to get all the parameters that match the value in the dropdown HTML file as
<option value="21">A</option><option value="24">D</option> <option value="2">E</option>
This is the final one I want to get from the dropdown. Help me with this
I want to add these html options to this dropdown menu:
<select multiple="" style="width: 147px;" id="list" name="list1" class="list_class">
</select>
source to share
One solution uses join and split :
var id_arry = ['21', '24', '2'];
$("#list").val(id_arry.join(',').split(','));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" style="width: 147px;" id="list" name="list" class="list_class">
<option value="21">A</option>
<option value="22">B</option>
<option value="23">C</option>
<option value="24">D</option>
<option value="2">E</option>
</select>
source to share
Perhaps something like this:
var id_arry = ['21','24','2'];
var optionMatches = $('#list option').filter(function() {
return $.inArray($(this).val(), id_arry);
});
Destruction:
-
$('#list option')
- returns all parameters in the selection list with the identifier "list" -
.filter(callback)
- simple filter function - the callback decides if this parameter is in the final list -
$.inArray($(this).val(), id_arry)
- checks if the current value of the parameter is in the arrayid_arry
After examining your example, you'll first want to get the selected options from the dropdown of a few favorites to create id_arry
, which is very simple:
var id_arry = $('#list').val();
Once you have these and optionMatches
arrays of items, you can clone them into a new dropdown menu:
optionMatches.clone().appendTo('#otherSelect');
source to share
You can use jQuery's attribute equal to selector for target elements with a specific attribute value:
$( "option[value='21']" )
Using this selector and a simple loop, you can extract all the elements you need:
var elements = [];
var id_array = ['21','24','2'];
for ( index in id_array ){
var elem = $( "option[value='" + id_array[ index ] + "']" );
if ( elem ) {
elements.push( elem );
}
}
Your array now elements
contains all of the parameter elements whose values โโare mapped to id_array
.
source to share
var id_arr = ['21','24','2'];
var entireHTML = "";
var options = $('select').find('option');
var tempDiv = $('div');
//id_arr = $('select').val(); //Uncomment this line to get value from the select element.
$.each(id_arr, function(index, value){
entireHTML = "";
$(options).each(function(){
if( $(this).val() === value)
{
$(this).clone().appendTo(tempDiv);
}
});
});
entireHTML = $(tempDiv).html();
Since you want the HTML content of the "option" elements, they are cloned and wrapped in a temporary div, so the inner HTML of that temporary div is copied and appended to our last line of HTML.
Check it yourself: JSFiddle Test Link
source to share