Question

我有一个应用程序，其中包含一系列<select>下拉菜单，并根据用户的选择告诉浏览器alert()唯一的句子。根据先前的选择，下拉列表也show()或hide()相互连接。

我正在尝试创建一个使用document.querySelector或类似内容构成alert()输出一部分的变量。两个ID "s4"和"s5"包含非常相似的值，但这些下拉列表永远不会同时显示。为此，我想创建一个适用于两个ID的语句。

除了使用document.querySelector的最后一条语句，我已经成功创建了输出的每个部分。这是主要功能，我将在下面包括整个代码文件：

function alertCar(){

  //make
  var input1 = document.getElementById("s1").value;
  //models
  var input2 = document.getElementById("s2").value;
  var input3 = document.getElementById("s3").value;
  //drivetrain
  var drivetrainids = document.querySelector("#s4", "#s5").value;
  var input4;
  if (drivetrainids == "FWD"){
      input4 = "This car is front-wheel drive";
  }
  else if (drivetrainids == "AWD"){
      input4 = "This car is all-wheel drive";
  }
  else if (drivetrainids == "RWD"){
      input4 = "This car is rear-wheel drive";
  }

这是整个代码文件：

<!DOCTYPE html>
 <html>

  <head>
    <title>Test</title>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<style type="text/css">
  .chosen-select {width:200px}
</style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>


    <script type="text/javascript">
  $(function() {
    $(".chosen-select").chosen({
      disable_search_threshold: 4
    });

//BMW Start
  $("#s1").chosen().change(function(){
         if ($(this).val() === 'BMW'){
           $("#s2").parent().show();
         }
         else {
           $("#s2").parent().hide();
           $("#s5").parent().hide();
         }
     });

   $("#s2").chosen().change(function(){
          if ($(this).val() === 'X1','X2'){
            $("#s5").parent().show();
          }
          else {
            $("#s5").parent().hide();
          }
      });

//BMW End

//Audi Start
  $("#s1").chosen().change(function(){
         if ($(this).val() === 'AUDI'){
           $("#s3").parent().show();
         }
         else {
           $("#s3").parent().hide();
           $("#s4").parent().hide();
         }
     });

   $("#s3").chosen().change(function(){
          if ($(this).val() === 'Q1','Q3'){
            $("#s4").parent().show();
          }
          else {
            $("#s4").parent().hide();
          }
      });

 //Audi End


  function hide() {
    $("#s2").parent().hide();
    $("#s3").parent().hide();
    $("#s4").parent().hide();
    $("#s5").parent().hide();

  }
  // call hide AFTER .chosen() has been invoked on the visible elements
  hide();

 });

//alert

function alertCar(){

  //make
  var input1 = document.getElementById("s1").value;
  //models
  var input2 = document.getElementById("s2").value;
  var input3 = document.getElementById("s3").value;
  //drivetrain
  var drivetrainids = document.querySelector("#s4", "#s5").value;
  var input4;
  if (drivetrainids == "FWD"){
      input4 = "This car is front-wheel drive";
  }
  else if (drivetrainids == "AWD"){
      input4 = "This car is all-wheel drive";
  }
  else if (drivetrainids == "RWD"){
      input4 = "This car is rear-wheel drive";
  }


//Alert outputs
  if (input1 == "BMW"){
    alert("This is a BMW "+input2+". "+input4+"!");
  }
  else if (input1 == "AUDI"){
    alert("This is an Audi "+input3+". "+input4+"!");
  }
}

 </script>


</head>

<body onload="hide()">

 <table>
 <tr>
    <td>
        <select data-placeholder="Select Brand" class="chosen-select" id="s1">
          <option disabled selected></option>
          <option value="BMW">BMW</option>
          <option value="AUDI">AUDI</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <select data-placeholder="Select BMW Model" class="chosen-select" id="s2">
          <option disabled selected></option>
          <option value="X1">X1</option>
          <option value="X2">X2</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <select data-placeholder="Select Audi Model" class="chosen-select" id="s3">
          <option disabled selected></option>
          <option value="Q1">Q1</option>
          <option value="Q3">Q3</option>
        </select>

    <tr>
      <td>
        <select data-placeholder="Select Audi Drivetrain" class="chosen-select" id="s4">
          <option disabled selected></option>
          <option value="FWD">Front-wheel drive</option>
          <option value="AWD">Quattro all-wheel drive</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <select data-placeholder="Select BMW Drivetrain" class="chosen-select" id="s5">
          <option disabled selected></option>
          <option value="FWD">Front-wheel drive</option>
          <option value="AWD">X-Drive all-wheel drive</option>
          <option value="RWD">Rear-wheel drive</option>
        </select>
      </td>
    </tr>
  </table>

  <button id="b1" onclick="alertCar()">Submit</button>


 </body>
</html>
<!DOCTYPE html>
 <html>

  <head>
    <title>Test</title>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

<style type="text/css">
  .chosen-select {width:200px}
</style>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>


    <script type="text/javascript">
  $(function() {
    $(".chosen-select").chosen({
      disable_search_threshold: 4
    });

//BMW Start
  $("#s1").chosen().change(function(){
         if ($(this).val() === 'BMW'){
           $("#s2").parent().show();
         }
         else {
           $("#s2").parent().hide();
           $("#s5").parent().hide();
         }
     });

   $("#s2").chosen().change(function(){
          if ($(this).val() === 'X1','X2'){
            $("#s5").parent().show();
          }
          else {
            $("#s5").parent().hide();
          }
      });

//BMW End

//Audi Start
  $("#s1").chosen().change(function(){
         if ($(this).val() === 'AUDI'){
           $("#s3").parent().show();
         }
         else {
           $("#s3").parent().hide();
           $("#s4").parent().hide();
         }
     });

   $("#s3").chosen().change(function(){
          if ($(this).val() === 'Q1','Q3'){
            $("#s4").parent().show();
          }
          else {
            $("#s4").parent().hide();
          }
      });

 //Audi End


  function hide() {
    $("#s2").parent().hide();
    $("#s3").parent().hide();
    $("#s4").parent().hide();
    $("#s5").parent().hide();

  }
  // call hide AFTER .chosen() has been invoked on the visible elements
  hide();

 });

//alert

function alertCar(){

  //make
  var input1 = document.getElementById("s1").value;
  //models
  var input2 = document.getElementById("s2").value;
  var input3 = document.getElementById("s3").value;
  //drivetrain
  var drivetrainids = document.querySelector("#s4", "#s5").value;
  var input4;
  if (drivetrainids == "FWD"){
      input4 = "This car is front-wheel drive";
  }
  else if (drivetrainids == "AWD"){
      input4 = "This car is all-wheel drive";
  }
  else if (drivetrainids == "RWD"){
      input4 = "This car is rear-wheel drive";
  }


//Alert outputs
  if (input1 == "BMW"){
    alert("This is a BMW "+input2+". "+input4+"!");
  }
  else if (input1 == "AUDI"){
    alert("This is an Audi "+input3+". "+input4+"!");
  }
}

 </script>


</head>

<body onload="hide()">

 <table>
 <tr>
    <td>
        <select data-placeholder="Select Brand" class="chosen-select" id="s1">
          <option disabled selected></option>
          <option value="BMW">BMW</option>
          <option value="AUDI">AUDI</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <select data-placeholder="Select BMW Model" class="chosen-select" id="s2">
          <option disabled selected></option>
          <option value="X1">X1</option>
          <option value="X2">X2</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <select data-placeholder="Select Audi Model" class="chosen-select" id="s3">
          <option disabled selected></option>
          <option value="Q1">Q1</option>
          <option value="Q3">Q3</option>
        </select>

    <tr>
      <td>
        <select data-placeholder="Select Audi Drivetrain" class="chosen-select" id="s4">
          <option disabled selected></option>
          <option value="FWD">Front-wheel drive</option>
          <option value="AWD">Quattro all-wheel drive</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <select data-placeholder="Select BMW Drivetrain" class="chosen-select" id="s5">
          <option disabled selected></option>
          <option value="FWD">Front-wheel drive</option>
          <option value="AWD">X-Drive all-wheel drive</option>
          <option value="RWD">Rear-wheel drive</option>
        </select>
      </td>
    </tr>
  </table>

  <button id="b1" onclick="alertCar()">Submit</button>


 </body>
</html>

我对document.querySelector不太熟悉。我也会接受其他推荐的解决方案。任何帮助将不胜感激！

Answer 1

最简单的方法是通过应用设置为display: none;的类而不是使用show()和hide()来改变抑制两个选择元素的方式。然后，您可以使用:not()伪选择器来检查类的存在。

由于querySelector将返回null，因此，如果找不到任何元素，则可以将其用作三元表达式中的逻辑检查，并从显示的所有选择中获取值。

下面是一个简单的例子来说明这个想法：

// Select all ".example1" spans
var example1Spans = document.querySelectorAll(".example1");
console.log("Example 1 spans: ", example1Spans);

// Select only the default ".example1" span
var defaultSpan = document.querySelectorAll(".example1:not(.highlighted)");
console.log("Default example 1 span: ", defaultSpan);

// Log the value of the visible ".example2" span
var visibleSpan = (document.querySelector("#example2Span1:not(.hidden)")) ?
                   document.querySelector("#example2Span1") :
                   document.querySelector("#example2Span2");

console.log("Example 2 visible content: ", visibleSpan.textContent);

.highlighted {background-color: yellow;}
.hidden {display: none;}

<h1>Highlighted span example:</h1>
<div>
  Default Span ==&gt; <span id="example1Span1" class="example1">Default content</span> &lt;==<br />
  Highlighted Span ==&gt; <span id="example1Span2" class="example1 highlighted">Highlighted content</span> &lt;==
</div>

<h1>Hidden span example:</h1>
<div>
  Hidden Span ==&gt; <span id="example2Span1" class="example2">Span 1 content (visible)</span> &lt;==<br />
  Visible Span ==&gt; <span id="example2Span2" class="example2 hidden">Span 2 content (hidden)</span> &lt;==
</div>

最后的代码最接近您在场景中要做的事情。如果您要设置类似的“隐藏”类，例如：

.hidden {display: none;}

。。。并使用它来抑制“ s4”和“ s5” <select>元素，您将可以使用以下方法仅捕获可见的元素：

var visibleDriveTrainSelect = (document.querySelector("#s4:not(.hidden)")) ?
                               document.querySelector("#s4") :
                               document.querySelector("#s5");
var drivetrainids = visibleDriveTrainSelect.value;

如果您愿意，甚至可以进一步压缩它：

var drivetrainids = (document.querySelector("#s4:not(.hidden)")) ?
                     document.querySelector("#s4").value :
                     document.querySelector("#s5").value;

使用document.querySelector（）提取下拉值-多个ID

1 个答案: