如果重新加载页面后仍选择其他选项，则显示隐藏的文本框

debugcn 发表于 Dev

442

我有一个JavaScript代码

Java脚本

<script type="text/javascript">
    $(document).ready(function() {
    $("label[for='id_other']").hide();
    $("#id_other").hide();
    $('#id_subsector').change(function() {
        $("label[for='id_other']").show();
        $("#id_other").show();
        if ($('#id_subsector').val() == 'Others') {
            $("label[for='id_other']").css('display', 'block');
            $("#id_other").css('display', 'block');
        } else {
            $("label[for='id_other']").css('display', 'none');
            $("#id_other").css('display', 'none');
        }
    });
});
</script>

page.html

<label class="required" for="id_subsector">Sub-sector:</label> <select id="id_subsector" maxlength="50" name="subsector">
<option value="Auto ancillary">Auto ancillary</option>
<option value="Retail">Retail</option>
<option value="Life Sciences">Life Sciences</option>
<option value="Healthcare">Healthcare</option>
<option value="Logistics">Logistics</option>
<option value="Food &amp; Agriculture">Food &amp; Agriculture</option>
<option value="Printing">Printing</option>
<option value="Gems &amp; Jewellery">Gems &amp; Jewellery</option>
<option value="Light Engineering">Light Engineering</option>
<option value="Chemicals &amp; Dyes">Chemicals &amp; Dyes</option>
<option value="Motels &amp; Restaurants">Motels &amp; Restaurants</option>
<option value="Luxury &amp; Lifestyle">Luxury &amp; Lifestyle</option>
<option value="Power">Power</option>
<option value="Electrical and Electronic Goods">Electrical and Electronic Goods</option>
<option value="Education">Education</option>
<option value="Import/Export">Import/Export</option>
<option value="IT/ITES">IT/ITES</option>
<option value="Others">Others</option>
</select>

<label class="required" for="id_other">Others:</label>
<input id="id_other" maxlength="50" name="other" type="text">

现在，这就像单击其他按钮一样，将显示文本框，我可以输入数据。如必填字段，当我重新加载页面时，它消失并显示错误。

如果即使重新加载后也选择了其他框，我如何显示该文本框？/

赞赏的答案

安古

用它。这对您有帮助。我正在使用localStorage，并且您选择了“其他”选项，因此在加载页面后显示文本框

$(document).ready(function() {
    $("label[for='id_other']").hide();
    $("#id_other").hide();
    $('#id_subsector').change(function(){
    $("label[for='id_other']").show();
    $("#id_other").show();
                              localStorage.setItem("value_option",$('#id_subsector').val());        
    if($('#id_subsector').val() == 'Others')
        {
           $("label[for='id_other']").css('display', 'block');
           $("#id_other").css('display', 'block');
        }
    else
       {
           $("label[for='id_other']").css('display', 'none');
           $("#id_other").css('display', 'none');
       }
    });
    //load textbox if others
    var a=  localStorage.getItem("value_option");
    if(a!=null){
        $("#id_subsector").val(a);
        if(a == 'Others')
        {
           $("label[for='id_other']").css('display', 'block');
           $("#id_other").css('display', 'block');
        }
    }

});

点击演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。