我有一个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消失并保持隐藏状态。 请问我该如何实现? 所有答案将不胜感激。

#1楼 票数: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');
  }
};

#2楼 票数:1

我建议采用以下方法:

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

参考文献:

#3楼 票数:1

如果您不想使用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> 

#4楼 票数:1

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

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

  ask by Mina Hafzalla translate from so

未解决问题?本站智能推荐:

4回复

在点击(切换)时显示div使其无法正常工作

我在让它开始工作时遇到了一些困难。 基本上,我想隐藏一个div,但单击上一个div时将其显示,以使其不悬停。 我已经将上一篇文章用作指南,但似乎无法使其正常工作。 JS的新手,因此非常感谢您的帮助。 这是到目前为止我所掌握的东西: https : //jsfiddle.net/ss5
1回复

根据先前的输入选项选择(单选按钮)显示div的内容。在一个文件中工作,不在其他文件中工作

我有两步表格。 第一步问一个问题,有3个单选按钮。 根据选择哪个单选按钮,第二步通过“取消隐藏” div显示答案。 例如, 步骤1:您选择什么选项? 选项1,选项2,选项3 步骤2:根据步骤1中的选项,具有3个隐藏的div,其中之一从display:none更改为display:
1回复

导航到另一个组件后,jQueryDatepicker无法正常工作

我正在使用以下版本的jquery:^ 3.3.1 jquery-ui:1.12.1 angularjs 6这是我的代码,.html具有此定义 并在我的组件中(component.ts文件) 第一次加载页面时,会弹出日期选择器,但导航并返回此页面后,不会再次弹出。 在检查浏览器中的元素
2回复

选择一个选项后取消突出显示下拉菜单

我有一个下拉菜单 其中附有CSS: 但是,我有一个问题,一旦我从下拉菜单中选择了一个选项,下拉菜单便消失了,仅显示了我选择的选项。 反正有改变它自动突出显示
5回复

将div显示为块的Onclick无法正常工作?

如果您单击某个div,则试图显示文本。 但这不起作用,我也没有收到错误消息吗?
5回复

根据选择显示div并隐藏上一个div

我想知道如何通过单击另一个DIV,然后隐藏之前处于活动状态的另一个DIV来显示DIV。 我在弄乱JQuery slideUp()和slideDown(); 而且我似乎无法使其正常工作。 这是我正在使用的JSFiddle,只是在搞乱: https ://jsfiddle.net/wLay
4回复

当用户使用选择框无法正常工作时隐藏和显示div

对于我的网站,我允许用户使用下拉菜单选择各种选项,当他们选择一个选项我有一些应该隐藏的jquery或根据他们选择的显示不同的图片。 但它似乎没有改变。 我创造了一个小提琴,并把一些 在烹饪部分的文本尝试测试它但它仍然无法正常工作。 谁能明白为什么? http://jsfiddle
1回复

我有一个单选按钮,可更改页面上的html内容,但在某种情况下无法使其正常工作

这是有问题的应用程序: http://codepen.io/illpill/pen/pPpWOZ 代码混乱的地方: 单选按钮应该将温度从C更改为F。但是,我对它进行了编码,以利用搜索栏中的值,但在初始视图下,搜索栏中没有任何值。 如何在simpleweather框架内访问城市,并使