在 html 下拉列表中选择默认值答案

【问题标题】：Selecting default value in html dropdown list在 html 下拉列表中选择默认值
【发布时间】：2016-01-15 13:24:45
【问题描述】：

我目前希望在我的表单中有一个下拉列表。我有这个选择默认值的下拉菜单：

<p>Price Band:<select id='priceBand' style = 'width:150px' value = 'band1'>
<option value="band7">Reduce by 30c</option>
<option value="band6">Reduce by 25c</option>
<option value="band5">Reduce by 20c</option>
<option value="band4">Reduce by 15c</option>
<option value="band3">Reduce by 10c</option>
<option value="band2">Reduce by 5c</option>
<option value="band1"  selected="selected">default</option>
</select></p>

它工作正常并选择默认值作为默认值。但我还需要能够做的 - 提交表单后，我希望它保留最后选择的值作为默认值。它是一种用于添加不同价格范围的销售的表格。销售额由价格带输入，因此首先输入默认值，带 2、带 3 等等.. 最好的方法是什么？我目前在页面上使用 javascript 和 php，如果这样更容易吗？

Ajax 代码。我没有包括获取下拉列表的值，因为这只是我正在实施的新事物。我只想知道是否可以在首先加载表单时选择默认值，然后在选择不同的值时选择默认值，以将该值保持为新的默认值：

 $('#divItemisedSaleAdd').dialog({'autoOpen': false, 'modal' : true, 'buttons' : 
     [ { text: "Ok", click: function() {
        var url = '<?php echo Navigation::gUrl('/users/admin/stocktake_details_sales.php', array('stocktake_id' => $stocktake_id, 'action' => 'add_itemised_sale'));?>';

        var productCode = $('#ProductCode').val();
        var qty = $('#Quantity').val();

        var dialog = this;

        $.ajax({
            url: url,
            dataType: 'json',
            data: {'productCode' : productCode, 'qty' : qty},
            type: 'post',
            timeout: 5000,
            success: function(json) { 
                if (json.status == 'S'){
                    alert('Sale added'); 
                }
                else if (json.status == 'E')
                    alert('No product with given PLU was found! Please check!');
                    // loadDepartments();
                    $( dialog ).dialog( "close" );

            },
             error: function() {}

         });    


          } } ] });

【问题讨论】：

表单是用php还是ajax提交到流程页面？
它使用 ajax 提交
stackoverflow.com/questions/18633427/…
您可以使用 cookie，或者如果您的表单适用于注册用户（拥有帐户的成员），您可以在您的用户（或您拥有的任何表）表中再添加一列，同时提交 ajax 请求运行插入查询，在用户表中插入选定的值，下次默认使用。
是否需要仅作为下一页视图的默认值（因此，根据$_POST数据选择默认值）或跨用户会话持久化（因此，使用@987654325 @ 或 $_COOKIE)？

标签： javascript php html

【解决方案1】：

您可以为此目的使用localStorage：

$('#divItemisedSaleAdd').dialog({'autoOpen': false, 'modal' : true, 'buttons' : 
     [ { text: "Ok", click: function() {
        var url = '<?php echo Navigation::gUrl('/users/admin/stocktake_details_sales.php', array('stocktake_id' => $stocktake_id, 'action' => 'add_itemised_sale'));?>';

        var productCode = $('#ProductCode').val(),
            qty = $('#Quantity').val(),
            dialog = this;

        // save current selected value in storage
        localStorage.setItem("default_option", productCode);

        $.ajax({
            url: url,
            dataType: 'json',
            data: {'productCode' : productCode, 'qty' : qty},
            type: 'post',
            timeout: 5000,
            success: function(json) { 
                if (json.status == 'S'){
                    alert('Sale added'); 
                }
                else if (json.status == 'E')
                    alert('No product with given PLU was found! Please check!');
                    // loadDepartments();
                    $( dialog ).dialog( "close" );

            },
             error: function() {}

         });    


          } } ] });

// after page reload
if (localStorage.getItem("default_option")) {
   $('#ProductCode').val(localStorage.getItem("default_option")); 
}

【讨论】：

你能帮我解释一下localStorage吗？我不知道这种方式是否可行。您的评论说“页面重新加载后”，但页面并没有真正重新加载。我想我已经回答了我的问题。由于页面没有重新加载，最后选择的值仍然保持选中状态，直到我刷新页面.. 愚蠢的我！

【解决方案2】：

这可能会做到——selected = "selected" 或只是selected，这取决于您是否会使用 XHTML。它需要使值成为一个简单的整数，但这通过允许您只使用您将在查询中使用的intval() 以及控制所选选项来简化清理它。这个版本假设页面提交，现在显然不是这种情况，因为它都是由 Ajax 完成的，但希望它对某人有用。

    if(!isset($priceBand_value)) $priceBand_value = array();
    $priceBand_value = ''; // reset it if already used
    // set default 'selected = "selected"'; or just 'selected'; 
    <?php if(!isset($_POST['priceBand']) $priceBand_value[1] = 'selected = "selected"'; ?>
    <?php $priceBand_value[intval($_POST['priceBand'])] = 'selected = "selected"'; ?>

    <p>Price Band:<select id='priceBand' style = 'width:150px'>
    <option value="7" <?php echo $priceBand_value[7] ?>>Reduce by 30c</option>
    <option value="6" <?php echo $priceBand_value[6] ?>>Reduce by 25c</option>
    <option value="5" <?php echo $priceBand_value[5] ?>>Reduce by 20c</option>
    <option value="4" <?php echo $priceBand_value[4] ?>>Reduce by 15c</option>
    <option value="3" <?php echo $priceBand_value[3] ?>>Reduce by 10c</option>
    <option value="2" <?php echo $priceBand_value[2] ?>>Reduce by 5c</option>
    <option value="1" <?php echo $priceBand_value[1] ?>>default</option>
    </select></p>

在大多数情况下，您可以从 0 而不是 1 开始，但这主要是为了适应给定的代码框架。这样可以避免在首次呈现页面时将默认设置为 intval($_POST['priceBand']) 为 0，但在这种情况下，可能更难跟踪“波段”。

【讨论】：