Question

我正在学习JavaScript。基本上，我想要实现的是，当我选择品牌时，它将仅显示该特定品牌的型号列表框。你能帮助我了解如何获得所选第二个清单的价值吗？

<select id="txtBrand">
    <option value="HP" id="HP">HP</option>
    <option value="Dell">Dell</option>
    <option value="Toshiba">Toshiba</option>
</select>
<br>    <strong>Model:</strong>

<select id="txtHPModel">
    <option value="HP">HP Pavilion</option>
    <option value="Dell">HP Elitebooks</option>
    <option value="Toshiba">HP Probooks</option>
</select>
<select id="txtDellModel" hidden="hidden">
    <option value="HP">Dell Vostro</option>
    <option value="Dell">Dell Inspiron</option>
    <option value="Toshiba">Dell Latitude</option>
</select>
<select id="txtToshibaModel" hidden="hidden">
    <option value="HP">Toshiba Portege</option>
    <option value="Dell">Toshiba Tecra</option>
    <option value="Toshiba">Dell Satellite</option>
</select>

$(compbrand).click(function () {
    if (compbrand.value == "HP") {
        $(hp).removeAttr('disabled').show() $(dell).attr('disabled', 'disabled').hide();
        $(toshiba).attr('disabled', 'disabled').hide();
    }
    if (compbrand.value == "Dell") {
        $(dell).removeAttr('disabled').show() $(hp).attr('disabled', 'disabled').hide();
        $(toshiba).attr('disabled', 'disabled').hide();
    }
    if (compbrand.value == "Toshiba") {
        $(toshiba).removeAttr('disabled').show() $(hp).attr('disabled', 'disabled').hide();
        $(dell).attr('disabled', 'disabled').hide();
    }
});

</script>

Answer 1

您可以使用更改事件处理程序，根据所选值，您可以设置模型可见性。

还为所有模型选择元素指定一个公共类，以便于选择。

＆＃13;

$('#txtBrand').change(function() {
  var $current = $('#txt' + this.value + 'Model').show();
  $('.txt-model').not($current).hide();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="txtBrand">
  <option value="HP" id="HP">HP</option>
  <option value="Dell">Dell</option>
  <option value="Toshiba">Toshiba</option>
</select>

Model:

<select id="txtHPModel" class="txt-model">
  <option value="HP">HP Pavilion</option>
  <option value="Dell">HP Elitebooks</option>
  <option value="Toshiba">HP Probooks</option>
</select>
<select id="txtDellModel" hidden="hidden" class="txt-model">
  <option value="HP">Dell Vostro</option>
  <option value="Dell">Dell Inspiron</option>
  <option value="Toshiba">Dell Latitude</option>
</select>
<select id="txtToshibaModel" hidden="hidden" class="txt-model">
  <option value="HP">Toshiba Portege</option>
  <option value="Dell">Toshiba Tecra</option>
  <option value="Toshiba">Dell Satellite</option>
</select>

＆＃13;

Answer 2

// IYour HTML Change "hidden="hidden" TO style="displayn:none"

$（“＃txtBrand”）。change（function（）{

    var brand= this.value;
    if (brand== "HP") {
        $('#txtHPModel').fadeIn();
         $('#txtDellModel').fadeOut();
         $('#txtToshibaModel').fadeOut();

    } else if(brand== "Dell") {
       $('#txtHPModel').fadeOut();
         $('#txtDellModel').fadeIn();
         $('#txtToshibaModel').fadeOut();


    }else{
  $('#txtHPModel').fadeOut();
         $('#txtDellModel').fadeOut();
         $('#txtToshibaModel').fadeIn();

}

}）;

获取第二个列表框的选定值

2 个答案: