выпадающим выбранное значение изменилось

Question

У меня есть два inputradiobuttons

Вот HTML:

<div class="col-md-5 padding-Zero"> 
     <select name="fifthtype" class="dropdown" id="fifthtype" onChange="javascript:secondsChanged()"> 
     <option value="normal">Normal Second Mortgage</option> 
     <option value="silent">1st-time Home Buyer Silent Second</option> 
     </select> 
</div> 

эти два dropdownoptions имеют два различных значения каждого

<label id="Label19" class="pull-right">$<?php echo round($arrFirstBox["normalsecond"],2)?></label> 



<label id="Label19" class="pull-right">$<?php echo round($arrFirstBox["silentsecond"],2)?></label> 

Теперь мой вопрос, Я хочу показать свое значение, если я выберу Normal Second Mortgag е, я хочу показать свою ценность как:

<?php echo round($arrFirstBox["normalsecond"],2)?> 

и наоборот, для этого:

<?php echo round($arrFirstBox["silentsecond"],2)?> 

Как я буду это делать? Добавил jsfiddle в свой код? пожалуйста, посмотрите это https://jsfiddle.net/kdt33vo6/

Answer 1

Вы дублировали идентификаторы элемента ярлыка. Идентификаторы должны быть уникальными. вы можете добавить одно и то же имя класса.

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

$('select').change(function(){ 
    $('.pull-right').hide().eq($(this).find('option:selected').index()).show() 
}).change();//for showing changes on load 

Working Demo

Answer 2

, если у вас есть контроль над разметкой, то вы можете использовать data-* html5:

затем в label s:

удалить идентификаторы, потому что вы применяете одинаковые идентификаторы к различным элементам.

<label class="pull-right first">$<?php echo round($arrFirstBox["normalsecond"],2)?></label> 
<label class="pull-right second">$<?php echo round($arrFirstBox["silentsecond"],2)?></label> 

добавить те целевой атрибут имена классов, то вы можете использовать этот JS-код:

$('#fifthtype').change(function(){ 
    var lbl = $(':selected', this).data('target'); 
    $('.'+lbl).show().siblings('label').hide(); 
});