Member Avatar for bappi1987

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 because: Moved.
  • 2 Contributors
  • 1 Reply
  • 196 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Bachu
Member Avatar for Bachu

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.