2013-10-24 5 views
0

HTMLКак сбросить выбор варианта выбора при выборе другого элемента поля?

<div class="row-fluid together"> 
    <div class="span3"> 
     <p> 
     <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards</label> 
     </p> 

     <div id="typeofpostcardmaileroptions" class="hide"> 

     <p> 
     <label for="typeofpostcardmailerradio1" class="radio"><input type="radio" id="typeofpostcardmailerradio1" name="typeofpostcardmailer" value="Postcard Sizes" />Postcard Sizes</label> 
     </p> 
     <div id="postcardsizeoptions" class="hide"> 
     <select name="postcardsize"> 
     <option value="">pick size</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     </select> 
     </div> 

     <p> 
     <label for="typeofpostcardmailerradio2" class="radio"><input type="radio" id="typeofpostcardmailerradio2" name="typeofpostcardmailer" value="Custom Size" />Custom Size</label> 
     </p> 
     <div id="customsizeoption" class="hide"> 
     <input type="text" id="postcardcustomsize" name="postcardcustomsize" value="" /> 
     </div> 

     </div> 

    </div> 
    <div class="span3"> 
     <p>&nbsp;</p> 
     <p> 
     <label for="typeofmailerradio2" class="radio"><input type="radio" id="typeofmailerradio2" name="typeofmailerradio" value="Snaps" />Snaps</label> 
     </p> 
    </div> 
    <div class="span3"> 
     <p>&nbsp;</p> 
      <p> 
     <label for="typeofmailerradio3" class="radio"><input type="radio" id="typeofmailerradio3" name="typeofmailerradio" value="Specialty Mailers" />Specialty Mailers</label> 
     </p> 
    </div> 
    <div class="span3"> 
     <p>&nbsp;</p> 
     <p> 
     <label for="typeofmailerradio4" class="radio"><input type="radio" id="typeofmailerradio4" name="typeofmailerradio" value="Mailers" />Mailers</label> 
     </p> 
    </div> 
    </div> 

JS

//clear sub options if another main option is selected 
$("input[name='typeofmailerradio']").change(function(){ 
$("input[name='typeofpostcardmailer']").prop('checked', false); 
$('#postcardsizeoptions').hide("fast"); 
$('#postcardsize').find('option:first').attr('selected',true); 
}); 

//show or hide options of postcards 
$("input[name='typeofmailerradio']").click(function() { 
if(this.value == 'Postcards') { 
    $('#typeofpostcardmaileroptions').show("fast"); 
} 
else { 
    $('#typeofpostcardmaileroptions').hide("fast"); 
} 
}); 

//show or hide post card sizes dropdown box 
$("input[name='typeofpostcardmailer']").click(function() { 
if(this.value == 'Postcard Sizes') { 
    $('#postcardsizeoptions').show("fast"); 
    $('#customsizeoption').hide("fast"); 
} 
else { 
    //$('#postcardsize').prop('selectedIndex',0); 
    $('#postcardsize').find('option:first').attr('selected',true); 
    $('#postcardsizeoptions').hide("fast"); 
    $('#customsizeoption').show("fast"); 
    //$('#typeofpostcardmailerradio2').change(function(){ 
     //$('#postcardsize').prop('selectedIndex',0); 
     //$('#postcardsize').val( $('#postcardsize').prop('defaultSelected')); 
    //} 
} 
//if(this.value == 'Custom Size') { 
    //$('#postcardsize').val($('#postcardsize').prop('defaultSelected')); 
    //$('#postcardsize').prop('selectedIndex',0); 
    //var mypostcardsizeselect = $("select#postcardsize"); 
    //mypostcardsizeselect[0].selectedIndex = 0; 
    //mypostcardsizeselect.selectmenu("refresh"); 
//} 
}); 

//reset postcard size dropdown if custom picked 
//$('#typeofpostcardmailerradio2').change(function(){ 
// $('#postcardsize').prop('selectedIndex',0); 
//} 

CSS

.hide {display: none} 

jsfiddle

http://jsfiddle.net/Mk24U/

, имеющий полукомбинезоны чтобы получить выпадающий список для сброса при выборе других частей формы. вещи, которые я пробовал, - это все прокомментированные строки в области js.

щелкая открытку открывает новые элементы формы

щелкая открытки размеры открывает выпадающий элемент

нажав на заказ размер закрывает ниспадающее меню и открывает поле Текста

нажав на другие основные кнопки радио, как защелка, специальность, и mailers, закрывает все вспомогательные параметры под открытками, а также сбрасывает размеры открыток и галочки нестандартного размера.

при выборе варианта выпадающего меню, кроме «выбрать размер», а затем выбрать нестандартный размер, я хочу, чтобы выпадающая опция была сброшена, чтобы выбрать размер.

также при выборе оснастки, специальной почтовой программы или почтовых ящиков, я хочу, чтобы выпадающий список был сброшен, чтобы выбрать размер.

все, что я пробовал, я попробовал поместить инсайдера if/else, вне if/else и вне функции в своей собственной функции.

ничего не работает.

+0

вы можете уточнить, что вы пытаетесь достичь, то есть то, что делает «сброс» означает в данном случае? –

+0

скажите, что вы попадаете в раскрывающееся меню и выбираете «2». затем щелкните настраиваемое радио и выпадающий ящик, но значение все равно «2». я хочу, чтобы все было выбрано как «reset», и теперь новый выбор - «выбрать размер». – leoarce

+1

@leoarce Вы имеете в виду это http://jsfiddle.net/Mk24U/2/ – Manish

ответ

1

хорошо, проще всего будет добавить класс к другим основным радиокнопок как защелкой, специальность и почтовые программы, чтобы сказать someClass и вызывая событие щелчка этого, при нажатии изменить значение выберите опустошить, который выбрать размер

попробовать это

$('.someClass').click(function(){ 
    if(this.checked){ 
    $('select[name="postcardsize"]').val(""); 
    } 
}) 

fiddle here

0

Проблема с селектором

заменить

$('#postcardsize').find('option:first').attr('selected',true); 

с

$('select[name=postcardsize]').find('option:first').attr('selected',true); 

он должен работать

+0

это работало в скрипке, но не в моем реальном приложении – leoarce

Смежные вопросы