Javascript 当第二个下拉列表的值小于第一个下拉列表的值时，如何重置从属下拉列表中的值

我不熟悉Jquery。我使用Yii扩展组合框创建了两个DropDownList min_cost和max_cost。下面是我用来创建组合框的代码

<?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>

在上面的代码中，带有选项的select标记都是隐藏的。 在第一个dropdownlist中，我还调用了一个具有Jquery代码的函数来为第二个菜单创建依赖项。i、 e如果在第一个下拉列表中选择了10万个选项，那么第二个下拉列表中可用的选项将大于第一个下拉列表中选择的选项。我使用下面的函数根据第一个函数中选择的值过滤这些值

<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>

到目前为止，这一切都很顺利。但是，我想设置一个条件，如果在第二个dropdownlist中选择的最大值小于第一个，则第一个的值应重置为等于在第二个dropdownlist中选择的值。我怎样才能做到这一点。

---

我使用Jquery代码来实现这一点，但它无法识别select元素，因为它是隐藏的。当元素被隐藏时，我应该怎么做。我如何在Javascript函数中调用它们。

尝试以下操作：

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

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

});

---

这就是你想要的工作方式吗

---

每当从第二个下拉列表中选择一个值时，就会调用此函数cost_change2。您可能也希望在cost_change中调用它，因为否则用户可以在$min中选择5000万，然后在$max中添加60Lakh，然后将$min更改为80Lakhmaking min>max。

在第二个事件中为更改事件添加一个侦听器，并在处理程序中检查第一个DDL的当前值，如果有，请更改它to@sabotero我也做了同样的事情。我没有在脚本中提到它，而是将其作为小部件中的onselect。现在我想看看是否可以用jquerycheck完成一些事情下面是我的答案。您可以将事件窗体“更改”更改为“选定”。@不，它不起作用。我认为是因为select元素生成为display:none。即使使用display，也无法识别任何内容：none jQuery无法识别select标记。它必须与“Yii”冲突。当用户选择/突出显示某个文本（例如，在输入：文本框中）时，将使用该事件。在下拉菜单中使用onchange事件。

$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;
    }
}