Question

我常常遇到使用JQuery的问题。我有2个选择字段。

<select id="cat" name="cat_id">
    <option value="2">Cat 2</option>
    <option value="3">Cat 3</option>
    <option value="4">Cat 4</option>
</select>

<select id="subcat" name="subcat_id">
    <option class="subcats cat_2" value="1">Subcat 1</option>
    <option class="subcats cat_2" value="2">Subcat 2</option>
    <option class="subcats cat_3" value="3">Subcat 3</option>
    <option class="subcats cat_3" value="4">Subcat 4</option>
    <option class="subcats cat_3" value="5">Subcat 5</option>
    <option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>

这是我的JavaScript代码

<script type="text/javascript">

var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_"+curval).show(0);

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

    var cat = $(this).val();
    $(".subcats").removeAttr("selected").hide(0);
    if($(".cat_"+cat).length == 0){$(".cat_0").show(0);}
    else{$(".cat_"+cat).show(0);}
});

</script>

这是问题所在。当我更改cats选择的值时，subcats的选项会正确更改。但是，当前选定的字段仍在显示（即使它与当前猫不对应）。

非常感谢任何帮助。

Answer 1

您应该稍微更改一下代码，以便在hange事件中将所选属性添加到可用选项中的第一个元素：）

var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_" + curval).show(0);

$("#cat").change(function() {

  var cat = $(this).val();
  $(".subcats").removeAttr("selected").hide(0);
  if ($(".cat_" + cat).length == 0) {
    $(".cat_0").attr("selected", "selected").show(0);
  } else {
    $(".cat_" + cat).eq(0).attr("selected", "selected");
    $(".cat_" + cat).show(0);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<select id="cat" name="cat_id">
  <option value="2">Cat 2</option>
  <option value="3">Cat 3</option>
  <option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
  <option class="subcats cat_2" value="1">Subcat 1</option>
  <option class="subcats cat_2" value="2">Subcat 2</option>
  <option class="subcats cat_3" value="3">Subcat 3</option>
  <option class="subcats cat_3" value="4">Subcat 4</option>
  <option class="subcats cat_3" value="5">Subcat 5</option>
  <option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>

隐藏当前选定的选项

1 个答案: