Develop Reference

Get Option HTML by it's value in Jquery

How we can get the option HTML in jquery by it's 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 have some values related to values in the drop down. Now i want to get all the options that matches the value in dropdown HTML
like
<option value="21">A</option><option value="24">D</option> <option value="2">E</option>
This is the final out put i want from the drop-down.Kindly help me in this
I want to add those options html in this dropdown:
<select multiple="" style="width: 147px;" id="list" name="list1" class="list_class">
</select>

Maybe something like this:
var id_arry = ['21','24','2'];
var optionMatches = $('#list option').filter(function() {
return $.inArray($(this).val(), id_arry);
});
Breaking it down:
$('#list option') - returns all of the options in the select list with ID "list"
.filter(callback) - a simple filter function -- the callback decides whether the option makes it into the final list
$.inArray($(this).val(), id_arry) - checks if the current option value is in the array id_arry
After studying your example, it looks like you'll first want to obtain the selected options from your multi-select drop-down list to build your id_arry, which is very easy:
var id_arry = $('#list').val();
Once you have these and the optionMatches array of elements, you can clone them over to a new drop-down:
optionMatches.clone().appendTo('#otherSelect');

One solution is using 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>

You can use jQuery's attribute equals selector to 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 elements array now contains all option elements who's values appear in id_array.

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 need the HTML content of the 'option' elements, they're cloned and wrapped in a temporary div so that the inner HTML of that temporary div is copied and appended to our final HTML string.
Check it out for yourself : JSFiddle Test Link

Auto select pre and next option for html select tag

I have this select tag:
<select name="test">
<option value="stack">Stack</option>
<option value="overflow" selected>Overflow</option>
<option value="my">My</option>
<option value="question">Question</option>
</select>
For example I selected the overflow option. How can I auto select the prev option and next option of my selected option, with jquery?? I don't have to use the namo or the value, just select the previos or next option, whatever it is.
Thanks for help!!!

You can do it, if you add multiple attribute to the select
$('select').change(function () {
var i = $(this).find(":selected");
var arr = $(this).children();
i.next().prop('selected', true);
i.prev().prop('selected', true);
});
DEMO

I'm not sure I understand the use case, but here are two functions that will do what you want:
function selectPrev() {
// get the selected option
var $selected = $("select[name=test]").find('option:selected');
// remove the selected property
$selected.prop("selected", false);
// get previous option and add selected property
var $prev_option = $selected.prev().prop("selected", true);
}
function selectNext() {
// get the selected option
var $selected = $("select[name=test]").find('option:selected');
// remove the selected property
$selected.prop("selected", false);
// get next option and add selected property
var $next_option = $selected.next().prop("selected", true);
}

jQuery each function $(this) confusion

EXPLANATION:
I have two element with as many options inside them.
the first contains a series of options which have their db-id as their values. these are parents.
the second element is populated with a list of options which have their parent db-ids as their values and their own db-ids as their html id-attribute. these are children categories.
PROBLEM:
I want to have all the children cats to be hidden, and on each select event of any parent category, the relative children to become visible, using their values which is identical to their parent's value.
MY ATTEMPTS:
For this purpose, I have written the following script which does not work. It attaches a click event to each parent category, and this event triggers a function which is responsible to turn the visibility of any child cat on, if their values matches the values of the clicked element.
HTML CODE:
<select multiple name="branch" >
<option selected="" value="false">Please Select a Branch</option>
<option class="branch-item" value="0">Computer</option>
<option class="branch-item" value="1">Automobile</option>
<option class="branch-item" value="4">Technical</option>
</select>
<select multiple class="form-option" name="subbranch" >
<option class="subbranch-item" style="display: none;" value="1">Software</option>
<option class="subbranch-item" style="display: none;" value="1">Hardware</option>
<option class="subbranch-item" style="display: none;" value="7">Mechanics</option>
<option class="subbranch-item" style="display: none;" value="7">Welding</option>
</select>
JQUERY CODE:
<script type="text/javascript">
$(document).ready(function(e) {
$(".branche-item").click(function(){
var values = $(this).val();
$('.subbranch-item').parent().each(function(element, value) {
if(value == values)
{
element.show();
}
});
});
});
</script>
I appreciate any help on the debugging of the jquery code, thanks

Try
var $sub = $('select[name="subbranch"]');
var sub = $.trim($sub.html());
$('select[name="branch"]').change(function () {
var filter = $(this).children('option:selected').map(function () {
return '[value="' + this.value + '"]'
}).get().join();
$sub.empty().append($(sub).filter(filter))
}).change()
Demo: Fiddle

$('select[name="branch"]').change(function () {
var $branch = $(this).children(':selected'),
$subbranch = $('[name="subbranch"]').children('option');
$subbranch.hide()
$branch.each(function () {
var branch = $(this).val();
$subbranch.each(function () {
if ($(this).val() == branch) {
$(this).show();
}
});
});
}).change();
http://jsfiddle.net/F9777/3/

javascript affecting both drop downs

i have two drop downs, below is the code, my second dropdown is dependent to my first dropdown, so when i selected from first dropdown it will show options in second dropdown based on what i selected in the first. and then when i select an option from my second dropdown it will call a php page. but whats happening right now is when i select an option from my first dropdown, the page just refreshed and not giving option to select from second dropdown.
<tr>
<td align="center"><select name="Ticket" id="Ticket">
<option value="" selected="selected">Please Select...</option>
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
</select></td>
<tr>
<td align="center"><select name="Category" size="1" id="Category">
<option value="" selected="selected">--</option>
<option value="Select1.php" class="Option1">Select1</option>
<option value="Select2.php" class="Option2">Select2</option>
</select><input type="submit" value="Go" id="submit"/></td>
</tr>
and here is my js code so that second dropdown would call the php page,
UPDATE: i've updated the jquery and page is not refreshing when i select from my first dropdown but whats happening now is its trying to redirect the page already as soon as i selected from first dropdown...i want that to happen on my second dropdown and not on the first...
$(function() {
$("#submit").hide();
$("#form1 select").change(function() {
window.location = $("#form1 select option:selected").val();
})
});

This should do the trick. The page will only redirect when you click the 'Go' button.
$(function () {
$('#Ticket').change(function() {
var optionClass = $(this).val();
$('#Category option:not(:first)').hide();
if (optionClass) {
$('#Category').find('.' + optionClass).show();
}
});
$('#submit').click(function () {
window.location = $("#Category").val();
});
});
If you want to redirect as soon as the second selectlist option is selected, replace the $('#submit').click.... with
$(function() {
$('#Ticket').change(function() {
var optionClass = $(this).val();
$('#Category option:not(:first)').hide();
if (optionClass) {
$('#Category').find('.' + optionClass).show();
}
});
$('#Category').change(function() {
var url = $(this).val();
if (url) {
window.location = url;
}
});
});

Change
$("#form1 select").change(function() {
window.location = $("#form1 select option:selected").val();
})
to
$("#Category").change(function() {
window.location = $(this).val();
})

option is still visible in select after remove()

Hi all I have two select fields, on select field first if user select option value one or two then in select field of second all options are visible but if it select option two in first then option two want to remove from select id second. Following is my code:
<script type="text/javascript">
var index3,str;
</script>
<select id="first" onchange="chk();">
<option value = "one">one</option>
<option value = "two">two</option>
<option value = "three">three</option>
</select>
<select id="second">
<option value = "one">one</option>
<option value = "two">two</option>
<option value = "three">three</option>
</select>
<script type="text/javascript">
function chk()
{
index3 = document.getElementById("first");
str= index3.options[index3.selectedIndex].value;
alert("str:"+str);
if (str=="two")
{
$("#second option[value='two']").remove();
}
else
{
if ( $("#second option[value='two']").length == 0 )
{
$("#second").append('<option value="two">two</option>');
}
}
}
</script>
In fiddle it works fine here, But on mobile problem is: If I select option two from select id second, and then select option value two in first select id, then also option two is visible in second select id, if I click on second select id then only it removes. But in jsFiddle it works perfect. Any suggestion will be appreciated, Thanks in advance.

Here i have done complete bin for above issue. please go through demo link.
Demo http://codebins.com/bin/4ldqp7p
HTML
<select id="first">
<option value = "one">
one
</option>
<option value = "two">
two
</option>
<option value = "three">
three
</option>
</select>
<select id="second">
<option value = "one">
one
</option>
<option value = "two">
two
</option>
<option value = "three">
three
</option>
</select>
jQuery
$(function() {
$("#first").change(function() {
var optVal = $(this).val().trim();
if (optVal == "two") {
$("#second").find("option[value=" + optVal + "]").remove();
} else {
if ($("#second").find("option[value=two]").length <= 0) {
$("<option value=\"two\">two</option>").insertAfter($("#second").find("option[value='one']"));
}
}
});
});
Demo http://codebins.com/bin/4ldqp7p

check this Edit
$('#first').change(function() {
$("#second option[value='" + $(this).val() + "']").remove();
});

Your code looks a bit odd overall. If your intention is to remove the item from 'second' if it is selected in 'first', try this update: http://jsfiddle.net/NWbXt/58/
$(function() {
var first = $('#first'),
second = $('#second'),
removed;
first.change(function() {
var selected = first.val();
second.append(removed); //.. add back old option
removed = second.find('option[value="' + first.val() + '"]').remove();
}).trigger('change');
});​