sanoj lawrence sanoj lawrence - 6 days ago 4
Javascript Question

dynamic drop down using text file

I have created Dynamic drop down with text file to load on second drop down list


  • now my question is how do i display second drop down only when user select any option from first box



code



<script>
$(function() {
$("#text-one").change(function() {
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
});
</script>
</head>
<body>
<div id="page-wrap">
<h1>Pulls from text files</h1>
<select id="text-one">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<br />
<select id="text-two">
<option>Please choose from above</option>
</select>

</div>
</body>


i need display second drop down only when user select first one

full working

jsfiddle



snacks.txt



<option value="coffee">Coffee</option>
<option value="coke">Coke</option>

Answer

Put second dropdown as hidden as default

<select id="text-two" style="display :none">
        <option>Please choose from above</option>
    </select>

And inside on change of first dropdown, show it

$(function() {
        $("#text-one").change(function() {
            $("#text-two").show();
            $("#text-two").load("textdata/" + $(this).val() + ".txt");
        });
              });

Demo : http://jsfiddle.net/8hthxvf2/2/

Javscript fiddle- http://jsfiddle.net/RahulB007/Lnenuohd/