Question

我是JavaScript的新手，我想在单击其他选择选项时更改选择选项。所以我已经在谷歌上搜索了我找到的答案，这是我想要做的最相似的一个。（Change options in select box）
jsfiddle使用此答案：https://jsfiddle.net/p86jcL0s/

HTML

<form method="post">
<div class="form-row">

  <div class="form-group col-md-6">
    <label for="BigCategory">Asia</label>
    <select id="BigCategory" class="form-control" onchange="changeBcate(this.value);">
      <option>All</option>
      <option value="100">East Asia</option>
      <option value="200">South-East Aisa</option>
    </select>
  </div>

  <div class="form-group col-md-6">
    <label for="MiddleCategory">Country</label>
    <select id="MiddleCategory" class="form-control" onchange="changeMcate(this.value);">
      <option>All</option>
      <option value="110">Korea</option>
      <option value="120">China</option>
      <option value="130">Japan</option>
      <option value="140">Mongloia</option>
      <option value="210">Vietnam</option>
      <option value="220">Thailand</option>
      <option value="230">Cambodia</option>
      <option value="240">Indonesia</option>
    </select>
  </div>

  <div class="form-group col-md-6">
    <label for="SmallCategory">region</label>
    <select id="SmallCategory" class="form-control">
      <option selected>All</option>
      <option value="111">Seoul</option>
      <option value="112">Busan</option>
      <option value="113">Gwangju</option>
      <option value="121">Beijing</option>
      <option value="122">Sanghai</option>
      <option value="131">Tokyo</option>
      <option value="132">Osaka</option>
      <option value="141">vlaanbaatar</option>
      <option value="142">Arkhangai</option>
      <option value="211">Hanoi</option>
      <option value="212">hochimin</option>
      <option value="222">Bangkok</option>
      <option value="222">Chiangmai</option>
      <option value="231">Phnompen</option>
      <option value="241">Jakarta</option>
      <option value="242">Bali</option>
    </select>
  </div>
</div>
</form>

JS

var EastAsia=['Korea','China','Japan','Mongolia']
var EastSouthAsia=['Vietnam','Thailand','Cambodia','Indonesia']
var Korea=['Seoul','Busan','Gwangju']
var China=['Beijing','Sanghai']
var Japan=['Tokyo','Osaka']
var Mongolia=['ulaanbaatar','Arkhangai']
var Vietnam=['Hanoi','hochimin']
var Thailand=['Bangkok','Chiangmai']
var Cambodia=['Phnompen']
var Indonesia=['Jakarta','Bali']

/* function changeBcate(obj) {
  if (obj==100)  {
    // change Middle category option 110~140

  }
}

function changeMcate(obj) {
}
 */
$('#BigCategory').change(function(){
    //clear values
    $('#MiddleCategory').html('');

    //find which list to use
    var list = [];
    switch($(this).val()){
        case "100":
            list = EastAsia;
            break;
        case "200":
            list = EastSouthAsia;
            break;
    }

    //populate dropdown
    $.each(list, function(index, value){
        $('#MiddleCategory').append("<option>"+value+"</option>");
    });
});

$('#MiddleCategory').change(function(){
    //clear values
    $('#SmallCategory').html('');

    //find which list to use
    var list = [];
    switch($(this).val()){
        case "110":
            list = Korea;
            break;
        case "120":
            list = China;
            break;
        case "130":
            list = Japan;
            break;
        case "140":
            list = Mongolia;
            break;    
        case "210":
            list = Vietnam;
            break;    
        case "220":
            list = Thailand;
            break;    
        case "230":
            list = Cambodia;
            break;    
        case "240":
            list = Indonesia;
            break;  

    }

    $.each(list, function(index, value){
        $('#SmallCateogory').append("<option>"+value+"</option>");
    });
});

但是我想在第二个和第三个框中输入“全部”，而人们在单击第一个框之前只能看到“全部”。（此外，当我单击第二个选择框时，以上答案不起作用。）

更多说明，第一个选择框是亚洲，第二个选择框是国家，第三个选择框是地区。所有选择框的默认值为“全部”，只有用户在单击“第一个框”选项之前可以从第二个和第三个框中看到“所有”。因此，如果人们在第一个框中单击选项，那么他们可以看到第二个框选项（用户尚未看到第三个盒子选项。他们只能从第三个框中看到“全部”），如果人们单击第二个选择框中的选项，则他们可以在第三个框中看到选项。

以下示例。
！[example] [https://imgur.com/OqoSZSO]

感谢您的帮助。

Answer 1

为什么只检查变量 list 是否为空，然后将其为空，只需追加<option>All</option> 这样，如果大类别选择了全部选项，它将更改中类别和小类别选择框ah所有选项。

$('#BigCategory').change(function(){
  //clear values
  $('#MiddleCategory').html('');

  //find which list to use
  var list = [];
  switch($(this).val()){
    case "100":
        list = EastAsia;
        break;
    case "200":
        list = EastSouthAsia;
        break;
  }

  //populate dropdown
  if(list.length == 0){
     $('#MiddleCategory').append("<option>All</option>");
     $('#SmallCateogory').append("<option>All</option>");
  }else{
      $.each(list, function(index, value){
        $('#MiddleCategory').append("<option>"+value+"</option>");
      });

     $('#SmallCateogory').append("<option>All</option>");
  }

});

$('#MiddleCategory').change(function(){
  //clear values
  $('#SmallCategory').html('');

  //find which list to use
  var list = [];
  switch($(this).val()){
    case "110":
        list = Korea;
        break;
    case "120":
        list = China;
        break;
    case "130":
        list = Japan;
        break;
    case "140":
        list = Mongolia;
        break;    
    case "210":
        list = Vietnam;
        break;    
    case "220":
        list = Thailand;
        break;    
    case "230":
        list = Cambodia;
        break;    
    case "240":
        list = Indonesia;
        break;  

  }

  if(list.length == 0){
     $('#SmallCateogory').append("<option>All</option>");
  }else{
    $.each(list, function(index, value){
      $('#SmallCateogory').append("<option>"+value+"</option>");
    });
  }
});

希望这会有所帮助！

Answer 2

我解决了（https://epthffh.tistory.com/entry/javascript-셀렉트박스SelectBox-바로실행） JS小提琴：https://jsfiddle.net/qbt394z2/

<select onchange="categoryChange(this)">
  <option>전체</option>
  <option value="a">블랙핑크</option>
  <option value="b">에프엑스</option>
  <option value="c">EXID</option>
</select>

<select id="good">
<option>좋아하는 멤버를 선택해주세요</option>
</select>

<script>
function categoryChange(e) {
  var good_a = ["지수", "제니", "로제", "리사"];
  var good_b = ["빅토리아", "엠버", "루나", "크리스탈"];
  var good_c = ["LE", "하니", "정화", "혜린", "솔지"];
  var target = document.getElementById("good");

  if(e.value == "a") var d = good_a;
  else if(e.value == "b") var d = good_b;
  else if(e.value == "c") var d = good_c;

  target.options.length = 0;

  for (x in d) {
    var opt = document.createElement("option");
    opt.value = d[x];
    opt.innerHTML = d[x];
    target.appendChild(opt);
  } 
}
</script>

第三个选择框，只需再执行一个功能即可。

单击其他框中的选项时，请更改选择框中的选项

2 个答案: