ドロップリストのオプションを選択したときにテキストフィールドにデータを取り込む方法

Question

<strong>Type Of Party</strong> 
<select name="p_name"> 
    <?php 
     $sql = mysqli_query($con, "SELECT * FROM party"); 
     while ($row = $sql->fetch_array()){ 

      echo '<option value="'.$row['type_party'].'">'.$row['type_party'].'</option>'; 
     } 
    ?> 
    </select> 


<p> 
    <strong>Max No. Of Children</strong> 
    <input type="text" id="txt" name="nocc" placeholder="Type Your children" required="required" /> 
</p> 

ドロップリストで選択したオプションの対応するデータでテキストフィールドのデータを取得します。 私のテーブルには：id、Type_party、capacityがあります。ドロップダウンリストでtype_partyを選択すると、テキストフィールドにcapacityが届きます。私を助けてください。

Answer 1

jQueryを使用すると、データ属性に容量を格納することで簡単に達成できます。次のJavaScriptコード

$('select[name="p_name"]').on('change', function() { 
    $('#txt').val($(':selected', this).data('capacity')); 
}); 

Answer 2

と

<strong>Type Of Party</strong> 
<select name="p_name" > 
<?php 
$sql = mysqli_query($con, "SELECT * FROM party"); 
while ($row = $sql->fetch_array()){ 

echo '<option value="'.$row['type_party'].'" data-capacity="' . $row['capacity'] . '">'.$row['type_party'].'</option>'; 
} 
?> 
</select> 


<p> 
<strong>Max No. Of Children</strong> 
<input type="text" id="txt" name="nocc" placeholder="Type Your children" required="required" /> 
</p> 

この簡単なJavaScriptを試してみてください

1. あなたは次にonchange機能へと適用され、各オプション
2. のためdata-capacityのcapacity属性を追加する必要があります選択
3. 最後次いでdata-capacity値を渡すselecIndex

   function getvalue(that) { 
        documenyt.getElementById('txt').innerHTML = that.options[that.selectedIndex].dataset.capacity 
       } 
   

   PHP

   <strong>Type Of Party</strong> 
       <select name="p_name" onchange="getvalue(this)"> 
       <?php 
       $sql = mysqli_query($con, "SELECT * FROM party"); 
       while ($row = $sql->fetch_array()){ 
   
       echo '<option value="'.$row['type_party'].'" data-capacity="'.$row['capacity'].'">'.$row['type_party'].'</option>'; 
       } 
       ?> 
       </select> 
   
   
       <p> 
        <strong>Max No. Of Children</strong> 
        <input type="text" id="txt" name="nocc" placeholder="Type Your children" required="required" /> 
       </p> 
   

   dataset

JavaScriptを使用して、テキストフィールドする一致します