Извлечение выпадающих значений с помощью document.querySelector () - несколько идентификаторов - PullRequest
Новая
       29

Извлечение выпадающих значений с помощью document.querySelector () - несколько идентификаторов

0 голосов
/ 22 мая 2019

У меня есть приложение, которое содержит серию <select> выпадающих меню и в зависимости от выбора пользователя сообщает браузеру alert() уникальное предложение.Раскрывающиеся списки также show() или hide() основаны на предыдущих выборках, они связаны друг с другом.

Я пытаюсь создать переменную, которая использует document.querySelector или что-то подобное, чтобы сформировать часть alert() выход.Два идентификатора "s4" и "s5" содержат значения, которые очень похожи, но эти выпадающие списки никогда не будут отображаться одновременно.Для этого я хочу создать одно утверждение, которое будет применяться к обоим идентификаторам.

Я успешно создал каждую часть вывода, кроме последнего оператора, который использует 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.Я также был бы открыт для других рекомендуемых решений.Любая помощь будет оценена!

1 Ответ

0 голосов
/ 22 мая 2019

Самый простой способ сделать это - изменить подавление двух элементов select, применяя класс, установленный в 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;
...