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

您应该从submit()移除onclick并在致电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，你可以做这样的事情

＆＃13;

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

＆＃13;

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

＆＃13;

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

选择选项后显示div。平变化=＆＃34;提交（）＆＃34;使它无法正常工作

4 个答案: