在html下拉列表中选择默认值 [英] Selecting default value in html dropdown list

问题描述

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

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>

这可以正常工作，并选择默认值作为默认值。但是我也需要能够做到 - 在提交表单之后，我希望它将最后选定的值保留为默认值。这是用于添加不同价格带的销售的表格。销售额由价格带进入，因此默认值首先输入，band2，band3等等。这样做的最佳方式是什么？我现在在页面上使用javascript和php，如果这使得它更容易？

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?

Ajax代码。我没有收到下拉的价值，因为这只是我正在实施的新事物。我只是想知道，如果可以在首先加载表单时选择默认值，然后选择不同的值时，将该值保留为新的默认值：

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:

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

         });    


          } } ] });

推荐答案

您可以使用 localStorage 为此：

You can use localStorage for that purpose:

$('#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")); 
}

这篇关于在html下拉列表中选择默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！