如何显示选择第一个选项

时间:2019-05-27 16:27:29

标签: jquery select

我的计算器有依赖选择器,我不知道解决一个问题。

默认情况下位于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);
  });
  });

Codepen https://codepen.io/soorta/pen/yWEjKv

0 个答案:

没有答案