Question

我是Jquery的新手。我使用Yii扩展名创建了两个下拉列表min_cost和max_cost 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>

在上面的代码中，带有选项的select标签都是隐藏的。在第一个下拉列表中，我还调用了一个具有Jquery代码的函数来为第二个菜单创建依赖项。即如果在第一个下拉列表中选择了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>

现在，这个工作正常。但是，我想创建一个条件，如果最大值（在第二个下拉列表中选择的值）小于第一个，则first的值应重置为等于在第二个下拉列表中选择的值的值。我怎么能这样做。
我使用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中调用它，因为否则用户可以在$ min中选择50Lakh，然后在$ max中选择60Lakh然后将$ min更改为80Lakh（使得min> gt max）。

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

2 个答案: