change value of select box 2 when value of select box 1 change

Question

0.00/5 (No votes)

See more:

I have 2 select box in html like that:

XML

<select id="ostan" class="DdlProvince">
                    <option id="1" value="test1">test1</option>
                    <option id="2" value="test2"> test2</option>
                </select>

and second select box is like this:

VB

<select id="shahr" class="DdlProvince">
                    <option class="1" value="t1">t1</option>
                    <option class="1" value="t2"> t2</option>
                    <option class="2" value="t3">t3</option>
                    <option class="2" value="t4"> t4</option>
                </select>

I want shown from select box 2 just that class=(selected item id from select box 1) when value of select box 2 changed . I use this code with jQuery:

JavaScript

$(document).ready(function () {
$('#ostan').change( function (e) {
   //alert("ssss");
var optionSelected = $("option:selected", this).attr('id');

        $("#shahr option").css('display','none');
        $("#shahr ."+optionSelected).css('display','block'); ;
}); });

How I can edit this line:

JavaScript

$("#shahr ."+optionSelected).css('display','block');

Can You help me to complet it?

Posted 26-Jan-15 1:06am

Karim Pazoki

Updated 26-Jan-15 1:21am

v3

Add a Solution

3 solutions

Solution 1

Build a cascading drop down - http://jsfiddle.net/mplungjan/65Q9L/[^].

Posted 26-Jan-15 1:09am

Abhinav S

Solution 3

Learn to adapt from this example code:

XML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#ostan").on('change', function(){

    var value = $(this).val();

    $('#shahr option').each(function(){
        var $option = $(this);
        if ($option.hasClass(value)) {
           $option.css('display','block');
        } else {
           $option.css('display','none');
        }
    });
  });
});
</script>
</head>
<body>
<select id="ostan" class="DdlProvince">
    <option value="">Select</option>
    <option value="test1">test1</option>
    <option value="test2"> test2</option>
</select>
<br>
<br>
<select id="shahr" class="DdlProvince">
    <option value=""></option>
    <option value="t1" style="display: none;" class="test1">t1</option>
    <option value="t2" style="display: none;" class="test1">t2</option>
    <option value="t3" style="display: none;" class="test2">t3</option>
    <option value="t4" style="display: none;" class="test2">t4</option>
</select>
</body>
</html>

An id attribute should be unique for an element and not be shared across multiple elements. For identifying group of related elements, use class attribute.

Posted 26-Jan-15 2:13am

Peter Leow

v2

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaket-cp · Accepted Answer · 2015-01-26T01:59:00

I am not sure if id should be used in Select-Option, in any case id should be unique.

It does not appear to be any issue with your code.
Possible issue when displaying (hiding) option of the select if it is being displayed already.

You could try something like this:

HTML

<!-- modified option attribute to use data-grp instead of id and class -->
<select id="ostan" class="DdlProvince">
    <option data-grp="1" value="test1">test1</option>
    <option data-grp="2" value="test2">test2</option>
</select>
<select id="shahr" class="DdlProvince">
    <option data-grp="1" value="t1">t1</option>
    <option data-grp="1" value="t2">t2</option>
    <option data-grp="2" value="t3">t3</option>
    <option data-grp="2" value="t4">t4</option>
</select>

JavaScript

$(document).ready(function () {
    $('#ostan').change(function (e) {
        var optionSelected = $("option:selected", this).attr('data-grp');
        $("#shahr option").css('display', 'none');
        $("#shahr option[data-grp='" + optionSelected + "']").css('display', 'block');

        //Set the option selectedIndex to the first one in the group of options
        $("#shahr")[0].selectedIndex=$("#shahr option[data-grp='" + optionSelected + "']")[0].index;
    });
});

Hope that helps out.

Link to the data-* attribute if you are interested:
http://html5doctor.com/html5-custom-data-attributes/[^]
http://www.w3schools.com/tags/att_global_data.asp[^]

change value of select box 2 when value of select box 1 change

3 solutions

Solution 2

Solution 1

Solution 3

Add your solution here

Preview 0

change value of select box 2 when value of select box 1 change

3 solutions

Solution 2

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us