Сбросить несколько опций выбора

Question

Итак, я использую функцию find_select() в javascript, и я бы хотел, чтобы это произошло, когда изменяется конкретный вариант выбора, сбросьте все остальные возможные варианты выбора за пределы первого. Вот фрагмент кода для функции, а также опция выбора, которую я хотел бы сбросить все остальное.

function find_select(){ 
if (document.getElementById("nsp").selected == true){ 

     if (document.getElementById("pre_alerts_yes").selected == true){ 
      document.getElementById('house_form').style.display = 'none'; 
      document.getElementById('nsp_form').style.display = 'block'; 
      document.getElementById('pre_alerts_yes_form').style.display = 'block'; 
      document.getElementById('feedback_form').style.display = 'none'; 
     } 
     else{ 
      document.getElementById('house_form').style.display = 'none'; 
      document.getElementById('nsp_form').style.display = 'block'; 
      document.getElementById('feedback_form').style.display = 'none'; 
     } 
} 
else if (document.getElementById("feedback").selected == true) 
{ 
    document.getElementById('house_form').style.display = 'none'; 
    document.getElementById('nsp_form').style.display = 'none'; 
    document.getElementById('feedback_form').style.display = 'block'; 
} 
else if (document.getElementById("house").selected == true) 
{ 
    document.getElementById('house_form').style.display = 'block'; 
    document.getElementById('nsp_form').style.display = 'none'; 
    document.getElementById('feedback_form').style.display = 'none'; 
} 
else{ 
    document.getElementById('house_form').style.display = 'none'; 
    document.getElementById('nsp_form').style.display = 'none'; 
    document.getElementById('feedback_form').style.display = 'none'; 
} 
} 

И HTML код:

<label for="input_title">Phone Type:</label> 
<select name="phone_type" id="select_form" class="input-block-level" onchange="find_select()"> 
    <option id="blank" value="blank"></option> 
    <option id="house" value="1">House Phone</option> 
    <option id="nsp" value="2">Normal Cell (Non Smart Phone)</option> 
     <option id="feedback" value="3">SmartPhone</option> 
</select> 

В качестве примера того, что происходит это. Если пользователь выбирает «Домашний телефон», на основе этого выбора появляется другое раскрывающееся меню, и затем они могут выбрать что-то внутри него. Но, если пользователь меняет свое мнение и хочет сказать «Смартфон», окна выбора, открывшиеся для «Дома», затем исчезают, и появляются новые окна выбора для смартфона. Но варианты, которые они выбрали для House Phone, которые теперь исчезли, все еще выбраны и будут опубликованы. Я хотел бы сбросить все значения на основе этого html, приведенного выше, для выбора, и затем должен заверить, что публикуются только правильные варианты, при этом ничего лишнего. Примеры, которые я нашел, похоже, не работают вместе с тем, что у меня есть.

Благодаря

Answer 1

Чтобы очистить выбор избранных, вы можете установить свойство SelectedIndex 0, как это:

$('#select_form').prop('selectedIndex', 0); 

---

Edit:

можно назвать группировку контейнеры (я предполагаю, что есть divs) соответственно первому выпадающему значению, например, используйте «div-дом» для первой группы и т. д. , Также вы можете пометить эти divs, чтобы иметь общее имя класса, например 'select-group'.

Как это:

<label for="input_title">Phone Type:</label> 
<select name="phone_type" id="select_form" class="input-block-level" onchange="find_select()"> 
    <option id="blank" value="blank"></option> 
    <option id="house" value="1">House Phone</option> 
    <option id="nsp" value="2">Normal Cell (Non Smart Phone)</option> 
    <option id="feedback" value="3">SmartPhone</option> 
</select> 

<div id="div-house" class="select-group"> 
    .... 
</div> 

<div id="div-nsp" class="select-group"> 
    ... 
</div> 

<div id="div-feedback" class="select-group"> 
    ... 
</div> 

Затем, вы можете это сделать в простой форме, как это:

$(document).ready(function() { 
    $(".select-group").hide(); 
}); 

function find_select() 
{ 
    // Hide all the dynamic divs 
    $(".select-group").hide(); 
    // Clear the selection of ALL the dropdowns below ALL the "select-group" divs. 
    $(".select-group").find('option:selected').removeAttr('selected'); 
    var select = $("#select_form"); 
    if (select.val() > 0) 
    { 
     // Show the div needed 
     var idSelected = select.find('option:selected').attr('id'); 
     $("#div-" + idSelected).show(); 
    } 
} 

Рабочий образец здесь: http://jsfiddle.net/9pBCX/

Answer 2

вы можете использовать эту функцию для сброс выбранного вами:

function resetSelectElement(selectElement) { 
    var options = selectElement.options; 

    // Look for a default selected option 
    for (var i=0, iLen=options.length; i<iLen; i++) { 

     if (options[i].defaultSelected) { 
      selectElement.selectedIndex = i; 
      return; 
     } 
    } 

    // If no option is the default, select first or none as appropriate 
    selectElement.selectedIndex = 0; // or -1 for no option selected 
} 

Теперь используйте функцию, чтобы сбросить его:

resetSelectElement(document.getElementById('house_form')); 

Вы сделали!

---

Совет: Я вижу, что вы используете document.getElementById() много раз в вашем коде.Если вы не хотите использовать JQuery, чтобы отборных элементов по Id, вы можете создать функцию, как это использовать его несколько раз:

function GE(el){ 
    return document.getElementById(el); 
} 

, а затем вы можете использовать его несколько раз в вашем коде, как:

resetSelectElement(GE('house_form')); 

Это сохранит ваш код, а также поможет вам сделать ваш код красивым. :)

Answer 3

Привет, мистер Тех, у меня не хватает времени, но вы хотите поделиться чем-то с вами, что может дать вам очень четкое и краткое представление о вашей логике управления, которую вы пытаетесь достичь. Вам нужно немного поработать, так как это довольно простые куки, которые я создал вовремя. Попытайтесь понять и создать логику вокруг этого, я надеюсь, что это будет полезно. Благодарю.

Вот два простых примера. Вы можете посмотреть документацию jquery для правильных атрибутов, которые будут соответствовать вашим потребностям.

[Пример 1:] http://jsfiddle.net/Superman/X4ykC/embedded/result/

//enable disable button on decision checkbox. 
$(function() { 
    $('#agree').change(function() { 
     $('#submit').attr('disabled', !this.checked); 
    }); 
}); 

[Пример 2:] http://jsfiddle.net/Superman/XZM5r/embedded/result/

//enable disable controls on checkbox 

$(function() { 
    enable_cb(); 
    $("#group1").click(enable_cb); 
}); 

function enable_cb() { 
    if (this.checked) { 
    $("input.group1").removeAttr("disabled"); 
    } else { 
    $("input.group1").attr("disabled", true); 
    } 
} 

Answer 4

Таким образом я наконец понял это. Человек, какая боль! Вот что, наконец, помогло мне заставить его работать, как я хотел: