下拉框取决于在另一个下拉框中选择的选项 [英] Drop-down box dependent on the option selected in another drop-down box

问题描述

我有一个表单中有两个不同的SELECT OPTION。

I have 2 different SELECT OPTION in a form.

第一个是Source，第二个是Status。我想在状态下拉列表中选择不同的选项，具体取决于源下拉列表中选择的选项。

The first one is Source, the second one is Status. I would like to have different OPTIONS in my Status drop-down list depending on the OPTION selected in my Source drop-down.

资料来源：

<select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option>
</select>

状态：

<select id="status" name="status">

</select>

选项：
- 如果源为MANUAL，则状态为OPEN或DELIVERED
- 如果来源是在线，则状态为OPEN或DELIVERED或SHIPPED

Options: - If Source is MANUAL, then Status is OPEN or DELIVERED - If Source is ONLINE, then Status is OPEN or DELIVERED or SHIPPED

我的非工作尝试：

            <script>
            $(document).ready(function () {
            var option = document.getElementById("status").options;
            if (document.getElementById('source').value == "MANUAL") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                }
            if (document.getElementById('source').value == "ONLINE") {
                $("#status").append('<option>OPEN</option>');
                $("#status").append('<option>DELIVERED</option>');
                $("#status").append('<option>SHIPPED</option>');
                }
            });
            </script>

推荐答案

尝试这样的东西... jsfiddle演示

try something like this... jsfiddle demo

HTML

 Source:   <select id="source" name="source">
     <option>MANUAL</option>
     <option>ONLINE</option> </select>

Status:

<select id="status" name="status">
    <option>OPEN</option>
      <option>DELIVERED</option>
    </select>

JS

$(document).ready(function() {

  $("#source").change(function() {

    var el = $(this) ;

    if(el.val() === "ONLINE" ) {
    $("#status").append("<option>SHIPPED</option>");
    }
      else if(el.val() === "MANUAL" ) {
        $("#status option:last-child").remove() ; }
  });

});

这篇关于下拉框取决于在另一个下拉框中选择的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！