当前位置: 首页 > 知识库问答 >
问题:

使用文本文件的动态下拉列表

甄文彬
2023-03-14

我已经创建了动态下拉与文本文件加载在第二个下拉列表

  • 现在我的问题是如何显示第二个下拉只有当用户选择任何选项从第一个框
<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>

我需要显示第二个下拉只有当用户选择第一个

充分工作

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

共有3个答案

刁跃
2023-03-14

如果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>
刘和玉
2023-03-14

干得好:

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

       }
    });
田兴怀
2023-03-14

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

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

哈维小提琴-http://jsfiddle.net/RahulB007/Lnenuohd/

 类似资料:
  • 问题内容: 我正在开发一个下拉菜单,该菜单使用HTML optgroups作为员工所属的组名。这是MySQL查询和输出: 唯一的问题是,我很难确定如何使optgroup正常工作。我尝试了无数次,这真的开始让我感到沮丧。 以下是我想要的输出示例(示例): 基本上,optgroup必须是“ groupname”,选项“ name”应该是“ emp_id”,而动作“ option”(下拉项)是“ emp

  • 问题内容: 在ASP .NET MVC Razor视图中,我有一个下拉列表,如下所示: DeviceModelList只是一个SelectList。 如何根据客户端操作(例如单击按钮或使用Javascript / jQuery/Ajax进行的其他下拉选择)动态填充DeviceModelList? 问题答案: 您可以将此下拉列表局部化: 然后在主视图中将其包含在某个容器中: 那么您可能会有一个控制器

  • 问题内容: 我想创建一个自动建议的文本框,该文本框将在每个键释放事件时查询数据库。这部分很简单,但是我想给它很好的视觉效果。与我们在网站中看到的自动建议文本框类似,例如在Facebook中搜索。 如何制作这样的界面? 一个幼稚的想法是将JList放在文本框的正下方,并在找到一个JList时将其设置为可见。 有更好的主意或标准方法吗? 问题答案: 我使用了另一种方法: 它使用一个称为的自定义类,该类

  • 在这里,我想在动态下拉列表中设置一个属性“selected”,当它在MVC中的HttpPost之后被单击时,它会显示相同的第一个文本“请选择一个类别”。 从HttpPost重载后,我想通过使用值来检查和设置选项标签中的属性“选择”,在Foreach循环选项标签中的动态下拉中获得“选择”属性。

  • 问题内容: 我需要一些帮助。在Excel(2013)VBE中使用Selenium Basic ChromeDriver(v 75.0.3770.140)进行Chrome(v75.0.3770.100)。如果存在客户id#,则有一个输入框会生成一个动态列表。我希望填写客户ID#,然后从动态下拉列表中选择。但是第一步,我正在努力将文本输入框。我可以点击带有 但是,当我尝试在框中填写以下内容时: 我收到

  • 问题内容: react-bootstrap站点中的示例代码显示以下内容。我需要使用数组来驱动选项,但是在查找将要编译的示例时遇到了麻烦。 问题答案: 您可以从这两个功能开始。第一个将基于传递到页面的道具动态创建您的选择选项。如果将它们映射到状态,则选择将自行重新创建。 然后,您将在render内部拥有此代码块。您将传递一个对onChange道具的函数引用,每次调用onChange时,所选对象将自动