CODEWITHSUNDEEP
javascriptphp
Dev
Dev

Reputation: 79

Javascript SELECT BOX options dependent on other SELECT BOX option selected

i have a problem. I wanted to do on my web page this thing: 1. i have select box like this

 <select name="firstbox" id="#firstbox">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

2. i have select box of which options are depending on first box, so if i choose in first box Option 1 i will have lets say this:

 <select name="secondbox" id="#secondbox">
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>

and if i choose Option 2 i would have lets say

<select name="secondbox" id="#secondbox">
    <option value="8">Option 8</option>
    <option value="9">Option 9</option>
</select>

And in adition based on those two selection box i need one link that changes url depending on those two. So it would be IF option from #firstbox = 1, and secondbox=2 #link is first.html

<a href="first.html" id="link" >Show </a>

I dont know if its doable in javascript, or is it better and more smooth to make it with PHP and small database... But i still dont know in that case how to change link of that button... Hope someone has an idea.

Upvotes: 0

Views: 1762

Answers (1)

user1978142
user1978142

Reputation: 7948

Alternatively, if you opt to use jQuery, of course you can use the onchange event. But first, you need to set a simple default values, wherein, it depends on what you select. Consider this example:

<select name="firstbox" id="firstbox" style="width: 100px;">
    <option disabled selected>Select Value</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<div id="select_boxes"></div>
<div id="link"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

var default_values = {
    "1": {"label": "first","values": [4,5]},
    "2": {"label": "second","values": [8,9]},
    "3": {"label": "third","values": [6,7]}
};

$(document).ready(function(){

    $('#firstbox').on('change', function(){
        var current = $(this).val();
        $('#select_boxes').html('<select name="secondbox" id="secondbox" style="width: 100px;"></select>');
        var options = '';
        $.each(default_values[current].values, function(index, values){
            options += '<option value="'+values+'">Option '+values+'</option>'; // fetch options
        });
        $('#secondbox').html(options); // add options
        $('#link').html('<a href="'+default_values[current].label+'.html" id="link">show</a>');
    });

});
</script>

Sample Output

Upvotes: 1

Related Questions