条件下拉列表 Javascript 和 HTML答案

【问题标题】：Conditional DropDown List Javascript and HTML条件下拉列表 Javascript 和 HTML
【发布时间】：2017-05-09 23:31:23
【问题描述】：

我正在尝试使用 html 和 javascript 制作一个具有条件下拉框的网页。假设这是一周中的某一天，比如星期一，星期四我需要一个带有不同选项的不同下拉框；但是有些日子可能会有相同的选择。最初我有两个下拉框，一个是当人们点击那一天，然后下拉框会出现，但我想知道是否有一种方法可以使用 javascript 函数自动执行此操作，并创建一个仅显示的函数某些下拉列表。

<html>
 <head></head>
 <body>
    <div id="myQuestions">
        <select id="QuestionOptions">
            <option value disalbe selected>What Day is it?</option>
            <option value="A">Monday</option>
            <option value="A">Tuesday</option>
            <option value="B">Wednesday</option>
            <option value="B">Thursday</option>
            <option value="B">Friday</option>
            <option value="A">Saturday</option>
            <optoin value="A">Sunday</optoin>
        </select>
    </div>
    <div id="myAnswers">
        <div id="A" style="display: none;">
            <div id="QuestionC">
                <p>Exapmle of question.</p>
            </div>
            <div id="QuestionD">
                <select id="QuestionOptionsD">
                    <option value disalbe selected>Choose Your Answer</option>
                    <option value="G">Answer G</option>
                    <option value="H">Answer H</option>
                </select>
            </div>
        </div>
        <div id="B" style="display: none;">
            <div id="QuestionE">
                <p>Exmaple of another question.</p>
            </div>
            <div id="QuestionF">
                <select id="QuestionOptionsF">
                    <option value disalbe selected>Choose Your Answer</option>
                    <option value="I">Answer I</option>
                    <option value="J">Answer J</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

提供 jsfiddle 或至少提供代码 sn-p。
是的，有几种方法可以用 JS 做到这一点。你的问题/问题是什么？你有什么尝试解决这个问题？你在哪里卡住了？

标签： javascript jquery html

【解决方案1】：

以下代码使选项值与选项值匹配时被选中。

<html>
 <head></head>
 <body>
<label>Quantity:</label><br><br>
<select name="qty" id="qty">
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="150">150</option>
    <option value="200">200</option>
    <option value="250">250</option>
    <option value="300">300</option>
    <option value="350">350</option>
    <option value="400">400</option>
    <option value="450">450</option>
    <option value="500">500</option>
</select>

<script>
     $(document).ready(function(){
       $('#qty option[value={{ $qty }}]').attr('selected','selected');
   });
</script>
</body>
</html>

【讨论】：

【解决方案2】：

带有动态选项

var dynamic_options = {
  'A': [{
    value: "1",
    text: "Option 1"
  }, {
    value: "2",
    text: "Option 2"
  }],

  'B': [{
    value: "3",
    text: "Option 3"
  }, {
    value: "4",
    text: "Option 4"
  }]
};

$(function() {
  var answers = $('#myAnswers').find('select');
  $('#myQuestions').on('change', 'select', function(e) {
    var options = dynamic_options[this.value] || [];
    answers.find('option:gt(0)').remove();
    $.each(options, function(i, option) {
      answers.append($('<option>').prop(option));
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myQuestions">
  <select>
    <option value=''>What Day is it?</option>
    <option value="A">Monday</option>
    <option value="A">Tuesday</option>
    <option value="B">Wednesday</option>
    <option value="B">Thursday</option>
    <option value="B">Friday</option>
    <option value="A">Saturday</option>
    <optoin value="A">Sunday</optoin>
  </select>
</div>
<div id="myAnswers">
  <div>
    <p>Exapmle of question.</p>
  </div>
  <div>
    <select>
      <option value=''>Choose Your Answer</option>
    </select>
  </div>
</div>

顺便说一句，要禁用select 中的option，使用属性disabled，而您使用了disalbe。

【讨论】：

【解决方案3】：

查看我的<a href="/default/index/tourl?u=aHR0cHM6Ly9qc2ZpZGRsZS5uZXQvZjk0ZDlhZTQv" rel="nofollow" target="_blank">JSFidle</a>。大部分 javascript 代码，删除一些不需要的 html 元素。

【讨论】：

【解决方案4】：

如果我正确理解了您的要求。这就是您正在寻找的使用 jquery

$("#QuestionOptions").change(function(){
  $("#A,#B").hide();
  if($(this).val() == "A"){
    $("#A").show();
  }else{
     $("#B").show(); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
 <head></head>
 <body>
    <div id="myQuestions">
        <select id="QuestionOptions">
            <option value disalbe selected>What Day is it?</option>
            <option value="A">Monday</option>
            <option value="A">Tuesday</option>
            <option value="B">Wednesday</option>
            <option value="B">Thursday</option>
            <option value="B">Friday</option>
            <option value="A">Saturday</option>
            <optoin value="A">Sunday</optoin>
        </select>
    </div>
    <div id="myAnswers">
        <div id="A" style="display: none;">
            <div id="QuestionC">
                <p>Exapmle of question.</p>
            </div>
            <div id="QuestionD">
                <select id="QuestionOptionsD">
                    <option value disalbe selected>Choose Your Answer</option>
                    <option value="G">Answer G</option>
                    <option value="H">Answer H</option>
                </select>
            </div>
        </div>
        <div id="B" style="display: none;">
            <div id="QuestionE">
                <p>Exmaple of another question.</p>
            </div>
            <div id="QuestionF">
                <select id="QuestionOptionsF">
                    <option value disalbe selected>Choose Your Answer</option>
                    <option value="I">Answer I</option>
                    <option value="J">Answer J</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

非常感谢。