选择选项并更改类 ul li

Question

我的代码

 <select id="jform_parent_id" name="jform[parent_id]">
        <option value="1">Public</option>
        <option value="8">- Admingruppe</option>
        <option value="9">- Guest</option>
        <option value="2">- Projektgruppe</option>
    </select>
    <ul class="chzn-results">
        <li class="active-result result-selected" data-option-array-index="0">Public</li>
        <li class="active-result" data-option-array-index="1">- Admingruppe</li>
        <li class="active-result" data-option-array-index="2">- Guest</li>
        <li class="active-result" data-option-array-index="3">- Projektgruppe</li>
    </ul>

我想： 选择选项值=2 将类 result-selected 添加到 ul li data-option-array-index="3" 删除其他地方选择的类结果

感谢您的帮助

Answer 1

这比您想象的要容易。您需要做的就是：

$(function () {
  // On change of the select...
  $("#jform_parent_id").change(function () {
    // Get the current selected index.
    var sIndex = this.selectedIndex;
    // Now find the <li> with correct data-option-array-index and add the class.
    $(".result-selected").removeClass("result-selected");
    $('li[data-option-array-index="' + (sIndex) + '"]').addClass("result-selected");
  });
});

这里有完整的片段：

$(function () {
  // On change of the select...
  $("#jform_parent_id").change(function () {
    // Get the current selected index.
    var sIndex = this.selectedIndex;
    // Now find the <li> with correct data-option-array-index and add the class.
    $(".result-selected").removeClass("result-selected");
    $('li[data-option-array-index="' + (sIndex) + '"]').addClass("result-selected");
  }).val("2").trigger("change");
});

.result-selected {background: #99f;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="jform_parent_id" name="jform[parent_id]">
  <option value="1">Public</option>
  <option value="8">- Admingruppe</option>
  <option value="9">- Guest</option>
  <option value="2">- Projektgruppe</option>
</select>
<ul class="chzn-results">
  <li class="active-result result-selected" data-option-array-index="0">Public</li>
  <li class="active-result" data-option-array-index="1">- Admingruppe</li>
  <li class="active-result" data-option-array-index="2">- Guest</li>
  <li class="active-result" data-option-array-index="3">- Projektgruppe</li>
</ul>

更新：在页面加载时使用了预选值。