Как сбросить значения в зависимом выпадающем списке, когда значение второго раскрывающегося списка меньше первого

Question

Я новичок в JQuery. Я создал два dropdownlists min_cost и max_cost с использованием расширения Yii combobox. Ниже приведен код, который я использовал для создания combobox.

<?php 
    $this->widget('ext.combobox.EJuiComboBox', array(
     'model' => $model, 
     'attribute' => 'min_cost', 
     // data to populate the select. Must be an array. 
     'data' => Yii::app()->params['cost_resales'], 
     'options' => array(
      'onSelect' => 'cost_change(item.value)', 
      'allowText' => false, 
     ), 
     // Options passed to the text input 
     'htmlOptions' => array('placeholder' => 'Min Cost', 'style'=>'width:70px'), 
    )); 
    /* 
     echo $form->dropDownList($model,'max_cost', array(), array('style'=>'width:120px')); 
     echo $form->dropDownList($model, 'min_cost', Yii::app()->params['cost_min_resales'], 
      array(
       'empty'=>'Choose one', 
       'onchange'=>'alert(value);', 
      ) 
     ); 
    */ 
?> 

<?php 
    $this->widget('ext.combobox.EJuiComboBox', array(
     'model' => $model, 
     'attribute' => 'max_cost', 
     // data to populate the select. Must be an array. 
     'data' =>Yii::app()->params['cost_resales'], 
     // options passed to plugin 
     'options' => array(
      'allowText' => false, 
     ), 
     // Options passed to the text input 
     'htmlOptions' => array('placeholder' => 'Max Cost', 'style'=>'width:70px'), 
    )); 
    /* 
     echo $form->dropDownList($model,'max_cost', array(), array('style'=>'width:120px')); 
     echo $form->dropDownList($model, 'max_cost', Yii::app()->params['cost_max_resales'], 
      array(
       'empty'=>'Choose one', 
       'onchange'=>'alert(value);', 
      ) 
     ); 
    */ 
?> 

Теперь, указанный выше виджет сгенерировал ниже под кодом HTML.

<select id="SearchForm_min_cost_select" style="display: none;"> 
    <option value="0"></option> 
    <option value="10 lakhs">10 lakhs</option> 
    <option value="20 lakhs">20 lakhs</option> 
    <option value="30 lakhs">30 lakhs</option> 
    <option value="40 lakhs">40 lakhs</option> 
    <option value="50 lakhs">50 lakhs</option> 
    <option value="60 lakhs">60 lakhs</option> 
</select> 
<input type="text" id="SearchForm_min_cost" name="SearchForm[min_cost]" style="width:70px" placeholder="Min Cost" class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
<button type="button" tabindex="-1" title="Show All Items" id="btn" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">&nbsp;</span> 
</button> 
<select id="SearchForm_max_cost_select" style="display: none;"> 
    <option value="0"></option> 
    <option value="10 lakhs">10 lakhs</option> 
    <option value="20 lakhs">20 lakhs</option> 
    <option value="30 lakhs">30 lakhs</option> 
    <option value="40 lakhs">40 lakhs</option> 
    <option value="50 lakhs">50 lakhs</option> 
    <option value="60 lakhs">60 lakhs</option> 
</select> 
<input type="text" id="SearchForm_max_cost" name="SearchForm[max_cost]" style="width:70px" placeholder="Max Cost" class="ui-autocomplete-input ui-widget ui-widget-content ui-corner-left" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"> 
<button type="button" tabindex="-1" title="Show All Items" id="btn" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon" role="button" aria-disabled="false"> 
    <span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span><span class="ui-button-text">&nbsp;</span> 
</button> 

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

<script> 
    function cost_change() { 
     var $options = jQuery('#SearchForm_min_cost_select').children().clone(); 
     console.log("options",$options); 
     var index = jQuery('#SearchForm_min_cost_select').find(':selected').index()+1; 
     console.log("index",index); 
     jQuery('#SearchForm_max_cost_select').html($options).children(':lt('+index+')').remove(); 
    } 
</script> 

Теперь это нормально работает до сих пор. Но я хочу сделать такое условие, что если максимальное значение (значение, выбранное во втором раскрывающемся списке) меньше первого, тогда значение первого должно быть сброшено до значения, равного значению, выбранному во втором раскрывающемся списке. Как я могу это сделать.
Для этого я использовал код JQuery, но он не распознает элемент select, поскольку он скрыт. Что делать, если элементы скрыты. Как я могу их вызвать в Javascript.

Answer 1

попробовать что-то вроде этого:

$("#SearchForm_max_cost_select").on('change', function(){ 
    var secondDDL = $(this), 
    firstDDL = $("#SearchForm_min_cost_select"); 

    if(firstDDL.val() > secondDDL.val()){ 
    firstDDL.val(secondDDL.val()); 
    } 

}); 

Answer 2

Является ли это, как вы хотите работать?

FIDDLE

$min = $('#SearchForm_min_cost_select'); 
$max = $('#SearchForm_max_cost_select'); 
$min.on('change', cost_change); 
$max.on('change', cost_change2); 
function cost_change2() { 
    var minIndex = $min.find(':selected').index(); 
    var maxIndex = $max.find(':selected').index(); 
    if (minIndex>maxIndex) { 
      $max[0].selectedIndex = minIndex; 
    } 
} 

Эта функция (cost_change2) вызывается всякий раз, когда значение выбирается из второго раскрывающегося списка. Возможно, вы захотите также называть его в cost_change, потому что в противном случае пользователь может выбрать 50Lakh в $ min, затем 60Lakh в $ max и затем изменить $ min на 80Lakh (делая min> max).