select选项获取其他输入

Question

我想做的是选择项目名称，其中是ID，如果项目选择，它会自动将项目序列号添加到serial number输入。

我认为它应该使用ajax也许，但我不知道具体如何。

Item Name:<br />
<div class="select-holder">
<i class="fa fa-caret-down"></i>
<?php
if($_items->count_items() == 0)
echo '<select name="item-name" disabled><option value="no">You need to add a item first</option></select>';
else{
echo '<select name="item-name" id="change-item">';
$items = $_items->get_items_dropdown();
while($item = $items->fetch_object()) {
echo "<option value="{$item->id}">{$item->name} - {$item->serialnumber}</option>";
}
echo '</select>';
}
?>
</div>
Serial Number:<br />
<div class="ni-cont">
<input type="text" name="item-serialnumber" class="ni" disabled/>
</div>

我还有其他输入，如description,price等。用这些值获取这些输入。

示例:我需要从select option id (value)

获取数据到我的字段

<input type="text" name="item-serialnumber" value="<?php echo $_items->get_item_serialnumber($id); ?>" class="ni" disabled/>
<input type="text" name="item-serialnumber" value="<?php echo $_items->get_item_description($id); ?>" class="ni" disabled/>

Answer 1

该值已经显示在您的选择框中，您可以简单地使用onchange事件，然后使用$(this).find("option:selected").text().split('-')[1]，这将给出串行编号，然后将其放入使用$('[name=item-serialnumber]').val(somevalue)的输入框中。此外，您可以通过ajax将id发送到您的服务器页面并获取结果。

演示代码 :

$("#change-item").on("change", function() {
var value = $(this).find("option:selected").text().trim().split('-')[1]
$("[name='item-serialnumber']").val(value)
var id = $(this).val();
//use ajax :
$.ajax({
url: "somepgaename.php", //the page containing php script
type: "post", //request type,
dataType: 'json',
data: {
id: id //send id as well
},
success: function(data) {
console.log(data.yourfieldname);
//put inside your input fields values like :
// $("[name='item-serialnumber']").val(data.serialno)
}
});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Item Name:<br />
<div class="select-holder">
<i class="fa fa-caret-down"></i>
<select name="item-name" id="change-item">
<option value="1">Abc-123</option>
<option value="2">Abc2-122</option>
<option value="3">Abc2-132</option>
</select>
</div>
Serial Number:<br />
<div class="ni-cont">
<input type="text" name="item-serialnumber" class="ni" disabled/>
</div>

然后，在您的服务器端获得id通过ajax使用$_POST['id']，然后获取结果使用选择查询，并将它们发送回ajax使用echo json_encode($somearray);即:

$id = $_POST['id'];
$stmt = $pdo->prepare("SELECT * FROM tablename WHERE id=:id");
$stmt->execute(['id' => $id]); 
//put fetch result inside array..send back to ajax 
//echo json_encode($somevalue);