我的计算器有依赖选择器,我不知道解决一个问题。
默认情况下位于select1,select2,select3 selectedIndex 0
中。
如果您从s elect1, select2
中选择选项,则启用该选项并按select1
中的值显示选项。
但是,如果您再次更改select1, select2
中的选项,则不会显示selectedIndex 0
。我该怎么办?
谢谢
我尝试过:
$("#select3").val(0);
插入这部分代码:
$(document).ready(function() {
$('#select1').change(function() {
val1 = $('#select1').find(':selected').data('cena');
val2 = 0;
val3 = 1;
$( "#result" ).html((val1 + val2) * val3);
$("#select2").attr('disabled',false);
$("#select3").attr('disabled',true);
$("#select3").val(0);
});
但是清除了select2之后。
这是我所有的代码。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class="col-xs-2">
<select class="form-control" name="select1" id="select1">
<option disabled="disabled" selected="selected" value="0">Vyber destináciu</option>
<option value="1" data-cena="1">Dublin</option>
<option value="2" data-cena="2">Londýn</option>
<option value="3" data-cena="3">Oxford</option>
<option value="4" data-cena="4">Edinburgh</option>
<option value="5" data-cena="5">Leeds</option>
<option value="6" data-cena="6">Worthing</option>
<option value="7" data-cena="7">Harrogate</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" name="select2" id="select2" disabled="disabled">
<option disabled="disabled" selected="selected" value="0">Výber izby</option>
<option value="1" data-cena="1" data-test="a">Hostiteľská rodina - Samostatna izba dublin</option>
<option value="1" data-cena="2">Rezidenčné apartmány - Samostatná izba dublin</option>
<option value="1" data-cena="3">Rezidenčné apartmány - Samostatná izba 2 dublin</option>
<option value="1" data-cena="4">Rezidenčné apartmány - Spoločná izba dublin</option>
<option value="2" data-cena="5">Hostiteľská rodina - Samostatna izba londýn</option>
<option value="2" data-cena="6">Hostiteľská rodina - Spoločna izba londýn</option>
<option value="2" data-cena="7">Rezidenčné apartmány - Samostatná izba londýn</option>
<option value="2" data-cena="8">Rezidenčné apartmány - Spoločná izba londýn</option>
<option value="3" data-cena="9">Hostiteľská rodina - Samostatna izba oxford</option>
<option value="3" data-cena="10">Hostiteľská rodina - Spoločna izba oxford</option>
<option value="4" data-cena="11">Hostiteľská rodina - Samostatna izba edinburgh</option>
<option value="4" data-cena="12">Hostiteľská rodina - Spoločna izba edinburgh</option>
<option value="4" data-cena="13">Rezidenčné apartmány - Samostatná izba edinburgh</option>
<option value="5" data-cena="14">Hostiteľská rodina - Samostatna izba leeds</option>
<option value="5" data-cena="15">Hostiteľská rodina - Spoločna izba leeds</option>
<option value="5" data-cena="16">Rezidenčné apartmány - Samostatná izba leeds</option>
<option value="6" data-cena="17">Hostiteľská rodina - Samostatna izba worthing</option>
<option value="6" data-cena="18">Hostiteľská rodina - Spoločna izba worthing</option>
<option value="7" data-cena="19">Hostiteľská rodina - Samostatna izba harrogate</option>
<option value="7" data-cena="20">Hostiteľská rodina - Spoločna izba harrogate</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" name="select3" id="select3" disabled="disabled">
<option disabled="disabled" selected="selected" value="0">Počet týždňov</option>
<option value="1" data-value="1">1</option>
<option value="2" data-value="2">2</option>
<option value="3" data-value="3">3</option>
<option value="4" data-value="4">4</option>
</select>
</div>
<p>Price: <span id="result">0</span></p>
jQuery
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$options = $select2.find( 'option' ),
val1,
val2,
val3;
$select1.on( 'change', function() {
$select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
$(document).ready(function() {
$('#select1').change(function() {
val1 = $('#select1').find(':selected').data('cena');
val2 = 0;
val3 = 1;
$( "#result" ).html((val1 + val2) * val3);
$("#select2").attr('disabled',false);
$("#select3").attr('disabled',true);
});
$('#select2').change(function() {
val2 = $('#select2').find(':selected').data('cena');
$( "#result" ).html((val1 + val2) * val3);
$("#select3").attr('disabled',false);
});
$('#select3').change(function() {
val3 = $('#select3').find(':selected').data('value');
$( "#result" ).html((val1 + val2) * val3);
});
});