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

I am currently looking to have a drop down list in my form. I have this drop down which selects the default value:

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

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

Which works fine and selects the default as the default value. But what I also need to be able to do - after the form is submitted I want it to keep the last selected value as the default one. It is a form used to add sales with different price bands. The sales are entered by the price bands so the defaults are entered first, the band2, band3 and so on.. What is the best way of doing it? I am currently using javascript and php on the page if that makes it any easier?

哪个工作正常，并选择默认值作为默认值。但我还需要做的是 - 在提交表单后，我希望它将最后选择的值保留为默认值。它是一个用于添加不同价格区间销售的表单。销售是通过价格区域输入的，因此首先输入默认值，band2，band3等等。这样做的最佳方法是什么？我目前在页面上使用javascript和php，如果这更容易吗？

Ajax code. I didn't include getting the value of the dropdown as this is only a new thing that I am implementing. I just want to know if it is possible to have a default value selected when the form is loaded first and then when a different value is selected, to keep that value as the new default:

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() {}

         });    


          } } ] });

2 个解决方案

#1

You can use localStorage for that purpose:

您可以将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")); 
}

#2

This might do it - either selected = "selected" or just selected depending on whether you will use XHTML or not. It requires making the value a simple integer, but that simplifies cleaning it up by allowing you just to use its intval() which you would use in your query as well as to control the selected option. This version assumed page submission which apparently is not the case here now as it is all done by Ajax but hope it will be useful to someone.

这可能会这样做 - 选择=“已选择”或仅选择，具体取决于您是否使用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>

You could start from 0 rather than 1 for most cases but this was intended primarily to fit the code framework given. This would avoid the need to set the default as intval($_POST['priceBand']) would be 0 when the page is first rendered but in this case it could be harder to keep track of the "bands".

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