码

<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>

我需要在用户选择第一个下拉列表时显示第二个下拉列表

全面工作

jsfiddle

snacks.txt

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

Answer 1

将第二个下拉列表隐藏为默认

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

在内部更改第一个下拉列表时，显示

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

演示：http://jsfiddle.net/8hthxvf2/2/

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

Answer 2

如果txt文件是这样的

示例：snacks.txt

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

javascript代码

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

已编辑的代码

<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>

Answer 3

你走了：

<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");

       }
    });

Answer 4

检查this小提琴

代码已修改

    $(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();
});

使用文本文件进行动态下拉

码

jsfiddle

snacks.txt

4 个答案: