Question

我有以下相互依赖的选择元素：

<select id="usercat">
    <option value="sold">Sold</option>
    <option value="bought">Bought</option>
</select>
<select id="catsold">
    <option value="cws">CW</option>
    <option value="ms">M</option>
    <option value="vas">VA</option>
</select>
<select id="catbought">
    <option value="cwb">CW</option>
    <option value="mb">M</option>
    <option value="vab">VA</option>
</select>

在那之后，我有一些div元素：

<div id="cwcats">
<div id="mcats">
<div id="vacats">
<div id="cwcatb">
<div id="mcatb">
<div id="vacatb">

我想发生的事情如下。加载页面后，＃usercat的值被分配为“ sold”，因此，只有两个选择元素可见：#usercat和#catsold。 #catbought元素被隐藏。

如果#catsold的值为“ cws”，则只有ID为“ cwcats”的div应该可见（所有其他div应该被隐藏）。如果#catsold的值为“ ms”，则只有ID为“ mcats”的div应该可见（所有其他div应该被隐藏）。值“ vas”也是如此。加载页面时，默认值应为“ cws”。

现在，如果#usercat选择元素的值更改为“购买”，则#catsold选择元素应被隐藏，而#catbought选择元素应与基于以下内容的相应div（#cwcatb或#mcatb或#vacatb）一起出现先前选择的值，或者如果没有，则默认值为div #cwcatb。

如您所见，＃usercat select元素确定将显示哪个“ sub”选择元素（#catsold或#catbought），而这两个“ sub” select元素内部的值确定将显示或消失哪些div在选择上，或更确切地说，在组合上。

我很长的歉意，并且我相信这很令人困惑，但这是我描述我要完成的工作的唯一方法。

下面，我将发表我在解决此问题上所做的极其糟糕的尝试，这可能有助于您更清楚地了解该问题，但是您可能应该完全不理会它。

document.getElementById("defaultOpen").click();
$('#catsold').on('change', function() {
    if (this.value == 'cws'){
        $("#cwarts").show();
        $("#marts").hide();
        $("#vaarts").hide();
    }
    if (this.value == 'ms'){
        $("#marts").show();
        $("#cwarts").hide();
        $("#vaarts").hide();
    }
    if (this.value == 'vas'){
        $("#vaarts").show();
        $("#marts").hide();
        $("#cwarts").hide();
    }
});
$(document).ready(function(){
    $('#usercat').on('change', function() {
      if (this.value == 'sold'){
        $("#sold").show();
        $("#bought").hide();
        $('#catsold').on('change', function() {
            if (this.value == 'cws'){
                $("#cwcats").show();
                $("#mcats").hide();
                $("#vacats").hide();
                $("#cwcatb").hide();
                $("#mcatb").hide();
                $("#vacatb").hide();
            }
            if (this.value == 'ms'){
                $("#mcats").show();
                $("#cwcats").hide();
                $("#vacats").hide();
                $("#cwcatb").hide();
                $("#mcatb").hide();
                $("#vacatb").hide();
            }
            if (this.value == 'vas'){
                $("#vacats").show();
                $("#mcats").hide();
                $("#cwcats").hide();
                $("#cwcatb").hide();
                $("#mcatb").hide();
                $("#vacatb").hide();
            }
        });
      } else if (this.value == 'bought'){
        $("#bought").show();
        $("#sold").hide();
        $('#catbought').on('change', function() {
            if (this.value == 'cwb'){
                $("#cwcatb").show();
                $("#mcatb").hide();
                $("#vacatb").hide();
                $("#cwcats").hide();
                $("#mcats").hide();
                $("#vacats").hide();
            }
            if (this.value == 'mb'){
                $("#mcatb").show();
                $("#cwcatb").hide();
                $("#vacatb").hide();
                $("#cwcats").hide();
                $("#mcats").hide();
                $("#vacats").hide();
            }
            if (this.value == 'vab'){
                $("#vacatb").show();
                $("#mctab").hide();
                $("#cwcatb").hide();
                $("#cwcats").hide();
                $("#mcats").hide();
                $("#vacats").hide();
            }
        });
      }
    });
});
$('#catbought').hide();
$(document).ready(function(){
    $('#usercat').on('change', function() {
        if (this.value == 'sold'){
            $("#catsold").show();
            $("#catbought").hide();
        } else if (this.value = 'bought'){
            $("#catsold").hide();
            $("#catbought").show();  
        }
    });
});

Answer 1

我们可以结合使用data attributes和attribute selector来显示我们的目标元素。

我们还可以向toggle添加布尔重载以显示和隐藏下拉列表：http://api.jquery.com/toggle/#toggle-display。

基本上，我们已经向目标div添加了一个data属性以指示何时显示它们，使用CSS隐藏它们是页面加载时的多余下拉列表。注释已添加到javascript中，以解释该过程。

/*FUnction to show the target*/
function showTarget() {  
  /*Hide all targets by default*/
  $(".targets div").hide();
  
  /*Generate an attribute selector*/
  var dataKey = $("#usercat").val();
  var dataVal = $("#cat" + dataKey).val();
  var selector = "div[data-" + dataKey + "=" + dataVal + "]"; 
  console.log(selector);
  //Show the element with the matching attribute
  $(selector).show();
}

$(document).ready(function() {
  //Bought/Sold Change
  $('#usercat').on('change', function() {
    /*Use the boolean overload for toggle to hide and show*/
    $("#catsold").toggle($(this).val() == "sold");
    $("#catbought").toggle($(this).val() == "bought");
    
    /*Call our show target methof*/
    showTarget();
  });

  //Just call show target
  $("#catsold,#catbought").on('change', showTarget);

});

#catbought {
  display: none;
}

.targets div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="usercat">
  <option value="sold" selected>Sold</option>
  <option value="bought">Bought</option>
</select>
<select id="catsold">
  <option value="cws">CW</option>
  <option value="ms">M</option>
  <option value="vas">VA</option>
</select>
<select id="catbought">
  <option value="cwb">CW</option>
  <option value="mb">M</option>
  <option value="vab">VA</option>
</select>

<div class="targets">
  <div id="cwcats" data-sold="cws">CWATS</div>
  <div id="mcats" data-sold="ms">MCATS</div>
  <div id="vacats" data-sold="vas">VCATS</div>
  <div id="cwcatb" data-bought="cwb">CWCATB</div>
  <div id="mcatb" data-bought="mb">MCATB</div>
  <div id="vacatb" data-bought="vab">VACTB</div>
</div>

您实际上可能根本不需要第三个下拉列表：

/*FUnction to show the target*/
function showTarget() {  
  /*Hide all targets by default*/
  $(".targets div").hide();
  
  /*Generate an attribute selector*/
  var dataKey = $("#usercat").val();
  var dataVal = $("#cats").val();
  var selector = "div[data-" + dataKey + "=" + dataVal + "]"; 
  console.log(selector);
  //Show the element with the matching attribute
  $(selector).show();
}

$(document).ready(function() {  
  //Just call show target
  $("#cats,#usercat").on('change', showTarget);
});

.targets div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="usercat">
  <option value="sold" selected>Sold</option>
  <option value="bought">Bought</option>
</select>
<select id="cats">
  <option value="cw">CW</option>
  <option value="m">M</option>
  <option value="va">VA</option>
</select>

<div class="targets">
  <div id="cwcats" data-sold="cw">CWATS</div>
  <div id="mcats" data-sold="m">MCATS</div>
  <div id="vacats" data-sold="va">VCATS</div>
  <div id="cwcatb" data-bought="cw">CWCATB</div>
  <div id="mcatb" data-bought="m">MCATB</div>
  <div id="vacatb" data-bought="va">VACTB</div>
</div>

从属选择元素根据其值生成不同的HTML数据

1 个答案: