存储值后，重复重新选择选择下拉菜单的第一个选项

Reselect first option of a select dropdown menu repeatedly after storing value

本文关键字：选择 下拉菜单 选项 第一个 新选择 存储      更新时间：2024-01-24

我已经查看了重新选择下拉列表的第一个选项的选项，并将代码包含在我的代码中。它在我第一次按下"addRow"按钮时有效，但在第二次或随后的"addRow"按钮时无效。相关代码是

$("#selectBox option:first-child").attr("selected", "selected");

完整代码如下：

<?php
$db = mysqli_connect("localhost",$username,$password,$database);
if($db->connect_errno > 0){
    die('Unable to connect to database [' . $db->connect_error . ']');
}
$sql="SELECT part_id, part_code, part_descr FROM part";
$result = $db->query($sql);
if (!$result){
    echo "no record found in the parts table";
}
$option = '<option value = "">select a part</option>';
while ($row = $result->fetch_assoc()) {
     $option .= '<option value = "'.$row['part_id'].'">'.$row['part_code'].' '.$row['part_descr'].$row['part_id'].'</option>';
   }
?>
<html>
<head>
<title>Test Drop Down Menu</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
</head>
<body  >
<form id="form2" name="form2" method="post" enctype="multipart/form-data">
    <div id="itemRows">
        Quantity:  <input type="text" name="add_qty" size="4" /> 
        Part: <select id="selectBox" name="selectBox"    
                data-placeholder="Choose a Part..." 
                style="width:350px;" class="chosen-select" 
                onchange="storePartId();"
                    >
                    <?php echo $option; ?>
        </select>
        <input type="hidden" name="add_part_id" id='add_part_id' /> 
        <input type="hidden" name="add_part_descr" id="add_part_descr" />
        <input onClick="addRow(this.form);" type="button" value="Add row" /> 
        (not saved until "Add row" clicked)
    </div>
        <input type="submit"  name="next" value="submit report">
</form>
<script type="text/javascript">
var rowNum = 0;
function addRow(frm) {
    rowNum ++;
    var row = '<p id="rowNum'+rowNum+'">'n'
    Quantity: <input type="text" name="qty[]" size="4" value="'+frm.add_qty.value+'" required> 'n'
    Part: <input type="text" name="part_descr[]" value="'+frm.add_part_descr.value+'" required> 'n'
    <input type="hidden" name="part_id[]" value="'+frm.add_part_id.value+'" required> 'n'
    <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_part_descr.value = '';
    frm.add_part_id.value = '';
    $("#selectBox option:first-child").attr("selected", "selected"); 
}
function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}
function storePartId() {
    var selectBox = document.getElementById("selectBox");
    selectedValue = selectBox.options[selectBox.selectedIndex].value;
    selectedText = selectBox.options[selectBox.selectedIndex].text;
    if (selectedValue !== null){
        document.getElementById("add_part_id").value = selectedValue;
        document.getElementById("add_part_descr").value = selectedText;
    }    else {
        document.getElementById("add_part_id").value = null;
        document.getElementById("add_part_descr").value = null;
    }
}
</script>
</body>
</html>

我希望"selectBox"在单击"addRow"按钮后显示文本"select a part"。它在第一次单击时执行，但随后不会执行。有什么想法吗？

您可以将selectedIndex设置为0以选择第一个选项。

document.getElementById('selectBox').selectedIndex = 0
相关文章：