當我在下拉列表中選擇一個選項時如何將數據檢索到文本字段中

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，並且我想在文本字段中接收capacity，當我在dropdownlist中選擇type_party時。請幫助我。

Answer 1

鑑於，您使用jQuery，這可以通過將容量存儲在數據屬性中來輕鬆實現。

<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代碼

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

Answer 2

試試這個簡單的JavaScript

1. 你需要添加的data-capacity的capacity屬性爲每個選項
2. 然後用onchange功能應用選擇
3. 最後匹配selecIndex然後傳遞data-capacity值使用dataset

的JavaScript

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> 

到文本框