当我在下拉列表中选择一个选项时如何将数据检索到文本字段中

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> 

到文本框