javascript - 依赖 select 元素根据其值生成不同的 HTML 数据

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 select 元素的值更改为“bought”，则#catsold select 元素应该被隐藏，而#catbought select 元素应该与相应的div(#cwcatb 或#mcatb 或#vacatb)一起出现，基于选择的先前值，或者如果没有，则使用默认选项，即 div #cwcatb。

如您所见，#usercat 选择元素确定将出现哪个“子”选择元素(#catsold 或#catbought)，而这两个“子”选择元素内的值决定哪些 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 添加一个 bool 重载来显示和隐藏我们的下拉菜单:http://api.jquery.com/toggle/#toggle-display .

基本上，我们向目标 div 添加了一个数据属性以指示何时显示它们，使用 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>