admin管理员组

文章数量:1304247

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>

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>
  • javascript
  • jquery
Share edited Oct 15, 2014 at 5:57 sanoj lawrence asked Oct 15, 2014 at 5:49 sanoj lawrencesanoj lawrence 1,0035 gold badges31 silver badges73 bronze badges 4
  • 1 can you show the file to be loaded? are there options with tags? – Fahad Khan Commented Oct 15, 2014 at 5:54
  • 1 what does txt file contain json or html option list ???? – rajesh kakawat Commented Oct 15, 2014 at 5:54
  • @Fahad added txt file only two line i have in my txt file when i select snacks i first box only then the second box should appear untill it should be hidden – sanoj lawrence Commented Oct 15, 2014 at 5:59
  • how can make work this without JQuery because the above example works with only jQuery but i don't use jquery form my page for this one method i need to add jquery is there any way to work without use of jQuery – sanoj lawrence Commented Nov 24, 2014 at 13:11
Add a ment  | 

4 Answers 4

Reset to default 5

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/8hthxvf2/2/

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

Here you go:

<select id="text-one">
        <option selected value="base">Please Select</option>
        <option value="beverages">Beverages</option>
        <option value="snacks">Snacks</option>
    </select>
<select id="text-two" style="display :none">

    </select>

JS:

$("#text-one").change(function() {

       if ($(this).val() != 'base')
       {
           $("#text-two").show();
          $("#text-two").load("textdata/" + $(this).val() + ".txt");

       }
    });

if txt file is something like this

Example : snacks.txt

<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>

javascript code

$("#text-one").change(function() {
    $.get( "textdata/" + $(this).val() + ".txt", function(data) {
        $("#text-two").html( data );
    });
});

EDITED CODE

<script>
    $(function() {
       $("#text-one").change(function() {
           if(this.value != 'base'){
                $.get( "textdata/" + this.value + ".txt", function(data) {
                    $("#text-two").html( data ).show();
                });
           }else{
                $("#text-two").hide();
           }
        });
    });
</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" style="display: none;">
            <option>Please choose from above</option>
        </select>

    </div>
</body>

check this fiddle

Code modified

    $(function () {
    $("#text-one").change(function () {
        if($('#text-one option:selected').index() >= 1)
            $('#text-two').show();        
        else
            $('#text-two').hide();

        $("#text-two").load("textdata/" + $(this).val() + ".txt");
    });
    $('#text-two').hide();
});

本文标签： javascriptdynamic drop down using text fileStack Overflow

版权声明：本文标题：javascript - dynamic drop down using text file - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741708865a2393722.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。