select dependant

by Muhammad Hassaan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<select name="variant" class="form-control select-size" data-product-id="4663748788269" id="select-option-1"
    style="width: 136px;">
    <option selected="selected" value="32742299697197"> Twin</option>
    <option value="32742299729965"> Queen</option>
    <option value="32742299762733"> King</option>
    <option value="32742299795501"> Cal King</option>
  </select>

  <select name="variant" class="form-control select-size" data-product-id="4641009893421" id="select-option-2">
    <option selected="selected" value="32742329909293"> Twin</option>
    <option value="123"> Cal King</option>
    <option value="32742329942061"> Queen</option>
    <option value="32742329974829"> King</option>
  </select>

  <select name="variant" class="form-control select-size" data-product-id="4641010843693" id="select-option-3">
    <option selected="selected" value="32742339969069"> Twin</option>
    <option value="32742340001837"> Queen</option>
    <option value="32742340034605"> King</option>
    <option value="32742340067373"> Cal king</option>
  </select>

  <a href="#" class="postBtn">Click me</a>

JavaScript

/*$('#first').change(function(){
	var this_val = this.value;
  $('#second, #third').val(this_val);
});*/


/*$('#first').change(function(){
	var this_val = this.value;
  $('select[name="changeme"]').val(this_val);
});*/

$('#select-option-1').on('change', function () {
        $(this).find("option:selected").attr('selected', 'selected').siblings().removeAttr("selected");
        var slectSize = $(this).find("option:selected").text().trim().toLowerCase();

        $('#select-option-2, #select-option-3').find("option:selected").removeAttr("selected");

        $('#select-option-2').find("option").each(function () {
          if ($(this).text().trim().toLowerCase() === slectSize) {
            $(this).attr("selected", "selected");
          }
        });

        $('#select-option-3').find("option").each(function () {
          if ($(this).text().trim().toLowerCase() === slectSize) {
            $(this).attr("selected", "selected");
          }
        });
      });

      var val_sel_1, val_sel_2, val_sel_3;
      $('.postBtn').click(function () {
        val_sel_1 = $('#select-option-1 option:selected').val();
        val_sel_2 = $('#select-option-2 option:selected').val();
        val_sel_3 = $('#select-option-3 option:selected').val();
        console.log(val_sel_1, val_sel_2, val_sel_3);

        return false;
      });