選擇選項後顯示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'); 
    } 
}; 

我想的div當選擇id="two"和value="anything"的選項並在頁面刷新後保持顯示時顯示。當用戶選擇其他選項時，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，則retrive在頁面加載時。

相反，如果使用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(); 
      } 
     }); 
    });