0

I have three combo boxes in my program...

look like this -->

box1

number
letter

box2

1 -
2 -
3 -
4 -
5 -

box3

1 -
2 -
3 -
4 -
5 -

How can i do it work in this solution ?

such as... in box1 i'm selected 'number' then in box2 and box3 load this same value but in box2 when i'm selected '1'..... and then i'm open box3 i won't see '1' was i selected on box2.

Have a solution to do it please ?

Edited by pritaeas: Moved.

2
Contributors
1
Reply
5
Views
4 Years
Discussion Span
Last Post by Bachu
0

Try This

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<label for="box1">Box1</label>
<select name="box1" id="box1">
<option value="1">number</option>
<option value="2">letter</option>
</select><br />
<label for="box2">Box2</label>
<select name="box2" id="box2">
<option value="">-- Select Value --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br />
<label for="box3">Box3</label>
<select name="box3" id="box3">
<option value="">-- Select Value --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

<script type="text/javascript">
$(function(){
    var Numbers='<option value="">-- Select Value --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>';
    var Letters='<option value="">-- Select Value --</option><option value="1">a</option><option value="2">b</option><option value="3">c</option><option value="4">d</option>';

    $('#box1').change(function(){
        var Value=$(this).val();
        if(Value==1) {
            $('#box2').html(Numbers);
            $('#box3').html(Numbers);
        }
        else if(Value==2) {
            $('#box2').html(Letters);
            $('#box3').html(Letters);
        }
    });

        $('#box2').change(function() {
        var sel = $(this);
        $("#box2 option").each(function(){
            $("#box3 option[value=" + $(this).val() + "]").show();  
        });

        $("#box3 option[value=" + sel.val() + "]").hide();
    });
});
</script>

</body>
</html>

Edited by Bachu

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.