选择一个选项后显示一个div。 onchange =“ submit（）”使其无法正常工作

Question

我有一个jQuery代码，在下拉列表中选择选项后会显示div。 它工作正常，但不是我需要的。 问题在于，选择该选项后，页面将刷新，因为选择上有一个onchange="submit()" 。 这会使div出现大约半秒钟，然后在加载页面时再次消失

HTML示例：

 <select onchange="submit()">
     <option id="one" value="something">Car</option>
     <option id="two" value="anything">Plane</option>
 </select>

<div id="somediv" style="display:none;">This is a string.</div>

jQuery的：

$('select').change(function(){
  decide($(this));
});
var decide = function (elem) {
    var touch = elem;
  if (touch.val() === 'anything') {
   return $('#somediv').css('display', 'block');
  }
};

我希望在选择id="two"和value="anything"选项时显示div，并在页面刷新后保持显示状态。 当用户选择另一个选项时，在页面刷新后，div消失并保持隐藏状态。 请问我该如何实现？ 所有答案将不胜感激。

Answer 1

您应该从onclick删除submit()并在调用decide函数后提交

就像是：

 <select>
     <option id="one" value="something">Car</option>
     <option id="two" value="anything">Plane</option>
 </select>

<div id="somediv" style="display:none;">This is a string.</div>

JS：

$('select').change(function(){
  decide($(this));
  $('form').submit();
});
var decide = function (elem) {
    var touch = elem;
  if (touch.val() === 'anything') {
   return $('#somediv').css('display', 'block');
  }
};

Answer 2

我建议采用以下方法：

 // define the function: function showIfSelected() { // 'this' is passed in by jQuery, and is the <select> element, // this.options is a NodeList of the <option> elements of // the <select>, this.selectedIndex is the index of the selected // <option> from amongst that NodeList: var opt = this.options[this.selectedIndex]; // finding all <div> elements with a 'data-showif' attribute: $('div[data-showif]') // hiding them all: .hide() // filtering that collection of <div> elements, to find the one // whose 'data-showif' attribute shares the value with the <option>: .filter('[data-showif=' + opt.value + ']') // showing that <div>: .show(); } // binding the showIfSelected() function as the change-event handler: $('select').on('change', showIfSelected) // triggering the change event (to show/hide the correct <div> // on document ready: .change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> <div id="somediv" data-showif="anything">This is a string.</div> 

参考文献：

• CSS：
  • 属性选择器。 * jQuery的：
  • change() 。
  • on() 。
  • filter() 。
  • hide() 。
  • show() 。

Answer 3

如果您不想使用ajax提交数据，则应通过get / post传递选定的值，或将其存储在会话/ cookie中，然后在页面加载时检索它。

相反，如果您使用ajax，则可以执行以下操作

 $('select').change(function(){ decide($(this)); $('form[name=a]').submit(); }) var decide = function (elem) { var touch = elem; if (touch.val() === 'anything') { return $('#somediv').css('display', 'block'); } } $('form[name=a]').submit(function(){ $('#res').text('Submitted!'); // Put $.ajax to submit your data return false; // Commenting this will result in a page refresh }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="a" method="post"> <select> <option id="one" value="something">Car</option> <option id="two" value="anything">Plane</option> </select> </form> <div id="somediv" style="display:none;">This is a string.</div> <div id="res"></div> 

Answer 4

试试这个代码，它可能会起作用。

 <option id="one" value="First">Car</option>
    <option id="two" value="Second" selected="selected">Plane</option>
</select>
<div id="div1">This is a string</div>

jQuery的：

 $(document).ready(function () {
        $("select").change(function () {
            var v = $("select").val();
            if (v == "Second") {
                $("#div1").show();
            }
            else {
                $("#div1").hide();
            }
        });
    });