如果在重新加载页面后选择了其他文本框，则显示隐藏文本框(Show hidden textbox if others is selected even after reloading the page)

如果在重新加载页面后选择了其他文本框，则显示隐藏文本框(Show hidden textbox if others is selected even after reloading the page)

我有一个javascript代码

使用Javascript

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

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

如果在重新加载后其他人被选中，我如何显示文本框？/

赞赏答案

I have a javascript code

Javascript

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

Right now this works as when I click on others, the textbox will be shown and I can enter the data. As It is required field, when I reload the page it disappears and shows error..

How can I show the textbox if others has been selected even after reload?/

Appreciated the answers

最满意答案

用它。 这对你有帮助。 我正在使用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'); } } });

单击演示

Use it. this is helpful for you. i am using localStorage and You selected others option show textbox after loading page

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

Click To Demo