Показывать div при выборе опции. onchange = "submit()" делает его неработоспособным

Question

У меня есть код jQuery, который отображает div при выборе опции в выпадающем списке. Он работает нормально, но не так, как мне нужно. проблема заключается в том, что при выборе опции страница обновляется, так как есть onchange="submit()" на выбор. Это делает появляется ДИВ около половины второго, а затем снова исчезают, когда страница загружена

Пример 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 исчезает и остается скрытым после обновления страницы. Как я могу достичь этого, пожалуйста? Все ответы были бы весьма признательны.

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/пост или хранить его в сессии/куки затем 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(); 
      } 
     }); 
    });