how do I enable or disable options select box based on selection in other select box in html?

Question

<select name="cat" class="input">
<option value="">----------Select Category--------</option>
<option value="Finance">Finance</option>
<option value="Travel">Travel</option></select>

<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="input">
<option value="">---------Select subcategory------</option>
<option value="Financial Planning">Financial Planning</option>
<option value="Financial Control">Financial Control</option>
<option value="Corporate Finance">Corporate Finance</option>
<option value="Financial Management">Financial Management</option>
<option value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>      
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>

How to make that possible in HTML? Can I use statements like if... else in HTML???

What should i do to achieve that Dynamic Enabling and Disabling in HTML?

`JavaScript` or `Jquery` could be the solution for what you are looking for — , Apr 22 '14 at 22:38
can you help me to know how to use it for that code part @inanikiran — AshrithGande, Apr 22 '14 at 22:43

score 1 · Answer 1 · edited May 23 '17 at 12:02

First you need to reference a JQuery Lib in your HTML page. You can follow this link to understand it.

And then you will need a data structure to map the relationship between categories and the subcategories. It can look like this: suppose also you have added id attributes to each select same as their respective name. var catAndSubCats= { Finance: ["Financial Planning", "Financial Control","Financial Management", "Financial Statement"], Travel: ["Travel Planning","Travel Management", "Corporate Travel"] } Then you need to write an onchange handler for $('select[name=cat') inside which you need to filter the $('select[name=scat]) options based on the selected options text in cat.

With that you use an event to populate your select subcat based on what the cat is:

<script>
  $(document).ready(function(){
       $("#cat").change(function () {
          var $selectedCat = $(this).find('option:selected').text();
          $("#subCat").html($("#subcat").filter(function () {
          return $.inArray($(this).text(), catAndSubCats[$selectedCat ]) >= 0;
         });
     });
</script>.

You can put above code in your head tag in your HTML file. Please don't forget the reference for JQuery Library

I am inspired via this solution. I hope it will help you

Where should I put this code in the place of my code in html file or should I create a separate file for it??? Sorry to ask such annoying but am an unknown or new to programming. — AshrithGande, Apr 23 '14 at 23:11

Justin · Answer 2 · 2014-04-24T00:35:28.960

As was stated above, you will need to link to the jQuery library. Here is my solution, which requires adding some classes to your HTML (note, I did this all inline for the sake of time):

EDIT**: It turns out there's a 'disabled' property for options in a select box. My last code did not work properly. This one should. Please see updated fiddle at the end.

<select name="cat" class="first">
<option value="">----------Select Category--------</option>
<option class="finance" value="Finance">Finance</option>
<option value="Travel">Travel</option></select>

<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="second">
<option value="">---------Select subcategory------</option>
<option class="finance" value="Financial Planning">Financial Planning</option>
<option class="finance" value="Financial Control">Financial Control</option>
<option class="finance" value="Corporate Finance">Corporate Finance</option>
<option class="finance" value="Financial Management">Financial Management</option>
<option class="finance" value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>      
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>

<!-- Copy and past everything below right before the closing </body> tag in your HTML -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(document).ready(function(){
        $('select.first').change(function(){
            var sel = $('select.first option').map(function(){
                return $(this).attr('class');
            });

            for (i = 0; i < sel.length; i++) {
                if ($('select.first option:selected').hasClass(sel[i])) {
                    $('select.second option').not('select.second option:first-child, .' + sel[i]).prop('disabled', true);
                    $('select.second option.' + sel[i]).prop('disabled', false);
                }
            }
        });
    });
</script>

Here's a JSFiddle: http://jsfiddle.net/SQm9T/1/

Where should I put this code in the place of my code in html file or should I create a separate file for it??? Sorry to ask such annoying but am an unknown or new to programming — AshrithGande, Apr 23 '14 at 23:09
You can copy and paste the code exactly as you see it in my answer right into your HTML before the closing body tag. You will also need to reference Jquery and the Jquery UI. I'll update my answer with instructions next time I'm in front of a computer, if you haven't figured out how to do it already by then. — Justin, Apr 23 '14 at 23:27

how do I enable or disable options select box based on selection in other select box in html?

2 Answers2