Question

请帮我这个代码。

我有2个选择框。选择框1包含“from”的年份。而第二个选择框包含“到”的年份。如果选定的“from”年份大于或等于它的值，我想禁用“to”的年份。我在这里使用php进行循环。我已经尝试了一些相关的javascript代码但没有任何作用。

这是我的HTML代码：

<?php
    $starting_year  = 1950;
    $ending_year    = 2014;
    $to = "";
    $from ="";

    for($starting_year; $starting_year <= $ending_year; $starting_year++) {
        $years[] = '<option value="'.$from.'">'.$starting_year.'</option>';
    }
?>

<select class="form-control select2me" name="from" id="from">
    <option value="" disabled selected></option>
    <?php echo implode("\n\r", $years);  ?>
</select>

<select class="form-control select2me" name="to" id="to">
    <option value="" disabled selected></option>
    <?php echo implode("\n\r", $years);  ?>
</select>

我希望你能帮助我。谢谢。

Answer 1

希望这能解决您的问题

HTML代码

<table>
    <tr >
     <td valign="top">
        <select class="formClass">
            <option value="">select</option>
            <option value="2015-09-01">2015-09-01</option>
            <option value="2015-09-02">2015-09-02</option>
            <option value="2015-09-03">2015-09-03</option>
            <option value="2015-09-04">2015-09-04</option>
            <option value="2015-09-05">2015-09-05</option>
        </select>
    </td>   
    <td valign="top">   
        <select class="toClass">
            <option value="">select</option>
            <option value="2015-09-01">2015-09-01</option>
            <option value="2015-09-02">2015-09-02</option>
            <option value="2015-09-03">2015-09-03</option>
            <option value="2015-09-04">2015-09-04</option>
            <option value="2015-09-05">2015-09-05</option>
        </select>
    </td>   
    </tr>
    </table>

Js代码

$(function() {
    $(document).on('change', '.formClass', function (e) {
        removeSmaller();            
    });

    function removeSmaller()
    {

        //enable all options///
        $('.toClass option').each(function () {
             $(".toClass").val('');
             $(this).prop('disabled', false);
            //$(this).show();
        });

        $('.formClass option:selected').each(function () {
           var select = $(this).parent(),
           optValue = $(this).val();
            //alert(optValue);

           if($(this).val()!=''){
               $('.toClass').not(select).children().filter(function(e){
                   if($(this).val()<=optValue)
                       return e
                }).prop('disabled', true);
               //}).hide();  //If you want to hide then uncommment this and comment upper one
           }
        });
    }
});

我选择静态值（YYYY-MM-DD格式）。

Answer 2

如果代码

，请尝试此片段

$('#from').on('change', function() {
    var val = this.value;
    disableSmallerYear(val);
});

var disableSmallerYear = function (val) {
    $('#to option').each(function(){
        if (this.value <= val) {
            $(this).attr("disabled", true);
        }
    });
}

实施例： http://jsfiddle.net/vgjq7qn6/

Answer 3

在每次选择时，您应首先重置第二个选择框：

$('#from').on('change', function () {
    var val = this.value;
    disableSmallerYear(val);
});

var disableSmallerYear = function (val) {
     $('#to').prop('selectedIndex', 0).find('option').each(function () {
        $(this).attr("disabled", this.value <= val);
     });
}

Answer 4

您是否尝试过使用过滤器和jQuery？

$('option').filter(function() {
    return this.text < desired_value;
}).prop("disabled", true);

以下是一个例子：

http://jsfiddle.net/uq9f2f4a/

当在选择2中选择更大时，删除选择1中的较低值

4 个答案:

当在选择2中选择更大时​​，删除选择1中的较低值

4 个答案:

当在选择2中选择更大时，删除选择1中的较低值