Question

我一直在努力让这个工作，但无济于事！我有两个下拉列表。根据第一个的选择定义第二个的内容。但是我在选择第二个下拉列表时遇到问题。

以下是简单的下拉菜单。

Repeat 0: End

然后使用on change事件我想定义内容：

<div id="advanced-search" class="advanced-search">
    <select name="Attribute" id="Attribute" class="advanced-attribute" onChange="AttributeChange()"></select>
    <select name="Operator" id="Operator" class="advanced-operator">
        <option value="">Select Attribute First</option>
    </select>
</div>

注意：第一个选择的选项是通过PHP从数据库中提取的。

忽略已经有效的function AttributeChange() { var SearchAttribute = $(this).find(':selected').attr('type'); if (SearchAttribute = 'varchar') { $(this).next().find('.advanced-operator').html('<option value="">Select Operator</option><option value="=">Is Equal To</option><option value="!=">Is Not Equal To</option><option value="LIKE">Contains</option><option value="NOT LIKE">Does Not Contain</option><option value="Start">Starts With</option><option value="End">Ends With</option><option value="IS NULL">Is Empty</option><option value="IS NOT NULL">Is Not Empty</option>'); } else { $('.advanced-attribute').siblings('.advanced-operator').html('<option value="">Select Attribute First</option>'); } }语句以及我在选项标签中定义的属性。

我不能做的是按类普遍选择第二个下拉列表（因为会有多个具有相同类的选择）并且我不会知道ID，因为它是自动生成的。

所以我一直试图获得IF元素，但我似乎无法让它工作。

Answer 1

您实施的问题是

this不是指您认为的元素
=是赋值运算符，其中==是相等的。
.advanced-operator是直接兄弟，所以请使用$(this).next('.advanced-operator')

内联事件处理程序被认为是不好的做法，并导致您的方案中存在潜在问题。

您应该使用.on()绑定事件处理程序。

$('.advanced-attribute').on('change', function() {
    var searchAttribute = $(this).find(':selected').attr('type');
    var nextSelector = $(this).next('.advanced-operator');
    //You need to use ==
    if (searchAttribute == 'varchar') {
        nextSelector.html('<option value="">Select Operator</option><option value="=">Is Equal To</option><option value="!=">Is Not Equal To</option><option value="LIKE">Contains</option><option value="NOT LIKE">Does Not Contain</option><option value="Start">Starts With</option><option value="End">Ends With</option><option value="IS NULL">Is Empty</option><option value="IS NOT NULL">Is Not Empty</option>');
    } else {
        nextSelector.html('<option value="">Select Attribute First</option>');
    }
})

$(function() {
  $('.advanced-attribute').on('change', function() {
    var searchAttribute = $(this).find(':selected').attr('type');
    var nextSelector = $(this).next('.advanced-operator');
    //You need to use ==
    if (searchAttribute == 'varchar') {
      nextSelector.html('<option value="">Select Operator</option><option value="=">Is Equal To</option><option value="!=">Is Not Equal To</option><option value="LIKE">Contains</option><option value="NOT LIKE">Does Not Contain</option><option value="Start">Starts With</option><option value="End">Ends With</option><option value="IS NULL">Is Empty</option><option value="IS NOT NULL">Is Not Empty</option>');
    } else {
      nextSelector.html('<option value="">Select Attribute First</option>');
    }
  }).change();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advanced-search" class="advanced-search">
  <select name="Attribute" id="Attribute" class="advanced-attribute">
    <option type="char">1</option>
    <option type="varchar">2</option>
  </select>
  <select name="Operator" id="Operator" class="advanced-operator">
    <option value="">Select Attribute First</option>
  </select>
</div>

Javascript在另一个选择的更改时更改下一个选择的html

1 个答案: