如何更改特定数据选择的下拉菜单答案

【问题标题】：how to change drop down on particulare data select如何更改特定数据选择的下拉菜单
【发布时间】：2018-01-30 17:59:24
【问题描述】：

在下面的情况下，如果在下面的下拉选项（id="store_machine"）中有几个 id (id="store_id") 我需要 master 和 salve。否则只有 master 。我正在使用 switch case，那个特定的 id 会出现，那么 master 和 salve 都应该出现，除了只有 master

<tr>
<td>
    <b>Store ID</b>
    <br>
</td>
<td>
    <input type="number"  id="store_id" readonly>
    <br>
</td>
</tr>
<tr>
<td>
    <b>Machine</b>
    <br>
</td>
<td>
    <select name="select-native-3" id="store_machine" data-iconpos="left">
        <option value="Master">Master</option>
        <option value="Slave">Slave</option>
    </select>
    <br>
</td>
</tr>



<script type="text/javascript">
$(function () {
    $('#store_id').on('change', function () {
        $('#store_machine').empty();
        switch ($(this).val()) {
            case "1425427806":
                $('#store_machine')
                    .append($('<option value=""></option>'))
                    .append($('<option value="Master">Master</option>'))
                    .append($('<option value="Slave">Slave</option>'));
                break;

            case "1452469394":
                $('#store_machine')
                    .append($('<option value=""></option>'))
                    .append($('<option value="Master">Master</option>'))
                    .append($('<option value="Slave">Slave</option>'));
                break;

            case "1489455419":
                $('#store_machine')
                    .append($('<option value=""></option>'))
                    .append($('<option value="Master">Master</option>'))
                    .append($('<option value="Slave">Slave</option>'));
                break;

            case "1415643163":
                $('#store_machine')
                    .append($('<option value=""></option>'))
                    .append($('<option value="Master">Master</option>'))
                    .append($('<option value="Slave">Slave</option>'));
                break;
            default:
                $('#store_machine')
                    .append($('<option value="">Select Machine</option>'))
                    .append($('<option value="Master">Master</option>'));
        }
    });
});

</script>

我在哪里出错了需要帮助。谢谢

【问题讨论】：

请查看您粘贴的内容，因为他质疑您的代码存在语法错误

标签： javascript jquery ajax html

【解决方案1】：

您的代码中有很多错误。很难列出它们，所以只需检查下面的固定代码。我删除了input 上的readonly 属性，以便我们可以在那里输入数据。

(function() {
  $('#store_id').on('change', function() {
    $('#store_machine').empty();

    switch ($(this).val()) {
      case "1425427806":
        $('#store_machine')
          .append($('<option value=""></option>'))
          .append($('<option value="Master">Master</option>'))
          .append($('<option value="Slave">Slave</option>'));
        break;
      case "1452469394":
        $('#store_machine')
          .append($('<option value=""></option>'))
          .append($('<option value="Master">Master</option>'))
          .append($('<option value="Slave">Slave</option>'));
        break;
      case "1489455419":
        $('#store_machine')
          .append($('<option value=""></option>'))
          .append($('<option value="Master">Master</option>'))
          .append($('<option value="Slave">Slave</option>'));
        break;
      case "1415643163":
        $('#store_machine')
          .append($('<option value=""></option>'))
          .append($('<option value="Master">Master</option>'))
          .append($('<option value="Slave">Slave</option>'));
        break;
      default:
        $('#store_machine')
          .append($('<option value="">Select Machine</option>'))
          .append($('<option value="Master">Master</option>'));
    }
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <b>Store ID</b>
    <br>
  </td>
  <td>
    <input type="number" id="store_id" />
    <br>
  </td>
</tr>
<tr>
  <td>
    <b>Machine</b>
    <br>
  </td>
  <td>
    <select name="select-native-3" id="store_machine" data-iconpos="left">
            <option value="Master">Master</option> 
            <option value="Slave">Slave</option>
        </select>
    <br>
  </td>
</tr>

我不知道为什么您的所有这些案例都具有相同的代码。除非这只是一个测试，并且您将对其进行更改以针对每种情况使用不同的代码，否则您可以完全折叠它们并使用相同的代码，如下所示：

(function() {
  $('#store_id').on('change', function() {
    $('#store_machine').empty();

    switch ($(this).val()) {
      case "1425427806":
      case "1452469394":
      case "1489455419":
      case "1415643163":
        $('#store_machine')
          .append($('<option value=""></option>'))
          .append($('<option value="Master">Master</option>'))
          .append($('<option value="Slave">Slave</option>'));
        break;
      default:
        $('#store_machine')
          .append($('<option value="">Select Machine</option>'))
          .append($('<option value="Master">Master</option>'));
    }
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <b>Store ID</b>
    <br>
  </td>
  <td>
    <input type="number" id="store_id" />
    <br>
  </td>
</tr>
<tr>
  <td>
    <b>Machine</b>
    <br>
  </td>
  <td>
    <select name="select-native-3" id="store_machine" data-iconpos="left">
            <option value="Master">Master</option> 
            <option value="Slave">Slave</option>
        </select>
    <br>
  </td>
</tr>

【讨论】：