確認ページ

Question

は、私は次のようにしている10個のドロップダウンメニューがあります。 forループとjavascriptでこれを行うことはできますか？私がこれを行う場合のように、私はどのようにHTMLでそれを呼び出すでしょうか？

function getItems() { 
     var items = [ 
      document.getElementById("item1").value, 
      document.getElementById("item2").value, 
      document.getElementById("item3").value, 
      document.getElementById("item4").value, 
      document.getElementById("item5").value, 
      document.getElementById("item6").value, 
      document.getElementById("item7").value, 
      document.getElementById("item8").value, 
      document.getElementById("item9").value, 
      document.getElementById("item10").value 
     ]; 

     for (int i = 0; i < items.length; i++) { 
      var count = 0; 
      if (
       (item[i] != "Please Select") || 
       (item[i] != "---Appetizers---") || 
       (item[i] != "---Main Courses---") || 
       (item[i] != "---Lunch Specials---") 
       ) { 
        document.getElementById(i).innerHTML = item[i]; 
        count++; 
      } 
     } 
    } 

ドロップダウンリストは、PHPを使用してMySQLデータベースから取り込まれます。私のHTML/ph：

Item 4    
      <select id="item4"> 
      <option value"">Please Select</option> 
      <?php if ($resultApp4->num_rows > 0) { ?> 
       <option value"">---Appetizers---</option>    
       <?php while($row = $resultApp4->fetch_assoc()) { ?> 
          <option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option> 
       <?php } } ?> 
       <?php if ($resultMain4->num_rows > 0) { ?> 
       <option value"">---Main Courses---</option>     
       <?php while($row = $resultMain4->fetch_assoc()) { ?> 
          <option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option> 
          <br> 
       <?php } } ?> 
       <?php if ($result4->num_rows > 0) { ?> 
       <option value"">---Lunch Specials---</option> 

       <?php while($row = $result4->fetch_assoc()) { ?> 
          <option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option> 
          <br> 
       <?php } } ?> 
      </select> 
      <br> 

Answer 1

すべてのオプションで1つのドロップダウンを生成するようです。これが意図されている場合は、複数の選択を行うことができます。これはデフォルトの動作ではありません。そのためにはmultiple属性をselectに追加してください。

次に、ユーザーが項目を選択または選択解除するたびにコードが実行されるように、リスナーをchangeイベントに追加する必要があります。

value属性の後には、一部を忘れたことに注意してください。=また、option要素の後に<br>タグを置くことはできません。 select要素の子要素はoptionである必要があります。ここで

を修正PHPがどのように見えるかです：

Item 4    
<select id="item4" multiple size="8"> 
    <option value="">Please Select</option> 
<?php if ($resultApp4->num_rows > 0) { ?> 
    <option value="">---Appetizers---</option>    
    <?php while($row = $resultApp4->fetch_assoc()) { ?> 
     <option value="<?php echo $row['price']; ?>"> 
      <?php echo $row['name']; ?> - $<?php echo $row['price']?></option> 
    <?php } } ?> 
<?php if ($resultMain4->num_rows > 0) { ?> 
    <option value="">---Main Courses---</option>     
    <?php while($row = $resultMain4->fetch_assoc()) { ?> 
     <option value="<?php echo $row['price']; ?>"> 
      <?php echo $row['name']; ?> - $<?php echo $row['price']?></option> 
    <?php } } ?> 
<?php if ($result4->num_rows > 0) { ?> 
    <option value="">---Lunch Specials---</option> 
    <?php while($row = $result4->fetch_assoc()) { ?> 
     <option value="<?php echo $row['price']; ?>"> 
      <?php echo $row['name']; ?> - $<?php echo $row['price']?></option> 
    <?php } } ?> 
</select> 

JavaScriptは、この作業スニペットのように、はるかに簡単かもしれない：

// Listen to the selection changes made: 
 
document.querySelector('#item4').addEventListener('change', function() { 
 
    // For this demo, the text is stored in a DIV 
 
    document.getElementById('output').textContent = 
 
     [...this.selectedOptions] // convert selected options list to array 
 
      .filter (option => option.value.length) // option must have a value 
 
      .map(option => option.textContent) // get text of option 
 
      .join('\n'); // add line breaks 
 
});

Item 4 (hold Ctrl key to add selections)<br> 
 
<select id="item4" multiple size=8> 
 
    <option value="">Please Select</option> 
 
    <option value="">---Appetizers---</option>    
 
    <option value="1">drink 1 - $1</option> 
 
    <option value="1.10">drink 2 - $1.10</option> 
 
    <option value="">---Main Courses---</option>     
 
    <option value="15">dish 1 - $15</option> 
 
    <option value="16">dish 2 - $16</option> 
 
    <option value="">---Lunch Secials---</option>     
 
    <option value="10">lunch 1 - $10</option> 
 
    <option value="11">lunch 2 - $11</option> 
 
</select> 
 
<div id="output" style="white-space:pre"></div>