选择选项并更改类别

时间:2018-06-22 08:50:20

标签: jquery

我的代码

firstArray = ["Jack Sparrow", "Ryan Gosling", "Peter Parker", "Mark Waugh", "Steve Jobs"]

secondArray = ["Jack Sparrow :10", "Ryan Gosling :40", "Peter Parker :30", "Mark Warner: 40", "Shane Warne :30", "Steve Jobs : 20", "Tony Stark :90", "Adam Gilchrist: 45.5"]

desiredArray = [100] //final answer here

function getCount(firstArray, secondArray) {
  firstArray.forEach((e1) => secondArray.forEach((e2) => {
    if (e1 === e2.split(":")[0].trim()) {
      desiredArray.push(e1)
    }
  }));

  return desiredArray;
  console.log(desiredArray);
}

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

感谢您的帮助

1 个答案:

答案 0 :(得分:3)

那比您想象的要容易。您所需要做的就是:

$(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>

更新:在页面加载时使用了预先选择的值。