Question

<select id="ddlMinExp">
           <option value="0">hour</option>
           <option value="1">1</option>
           <option value="2">2</option>
            <option value="3">3</option>
         <option value="4">4</option>
          <option value="5">5</option>
</select>
<select id="mints1">
          <option value="">minuts</option>
          <option value="00">00</option>
          <option value="30">30</option>
</select>
<select id="ddlMaxExp" class="slct">
         <option value="0">hour</option>
</select>
<select id="mints">
         <option value="">minuts</option>
         <option value="00">00</option>
         <option value="30">30</option>
</select>

JS：

<script>
    $(function() {
        $('#ddlMinExp').change(function() {
            //var selectedMaxValue = Number($(this).val());
            var selectedMinValue = Number($('#ddlMinExp').val());

            // alert(selectedMinValue);
            if (selectedMinValue < 12) {
                //alert(selectedMinValue);
                $(".slct option").remove();
                for (i = selectedMinValue; i < 12; i++) {
                    $('select.slct').append('<option value="' + i + '"' + '>' + i + '</option>');
                    //alert(i);
                }
            }

            $('body').on('change', '#mints1', function() {
                var mints = Number($(this).val());
                if (mints === 30) {
                    $(".slct option").remove();
                    var j = selectedMinValue + 1;
                    for (j; j < 12; j++) {
                        $('select.slct').append('<option value="' + j + '"' + '>' + j + '</option>');
                        //alert(i);
                    }
                } else {
                    $(".slct option").remove();
                    for (i = selectedMinValue; i < 12; i++) {
                        $('select.slct').append('<option value="' + i + '"' + '>' + i + '</option>');
                        //alert(i);
                    }
                }
            });
        });
    })
</script>

如果从第一个选择框4中选择自动第3个选择框从4开始，但是当我从第二个选择框中选择30时，第3个选择框应该从5开始，第一次它正在工作，第二次如果我从第一个选择3选择框第3个选择框应该是4个becoz中的星星已经第二个选择框的值为30，当我改变第一个和第二个选择框时第3个选择框必须更改see fiddle link

Answer 1

更新了您的小提琴，请点击此处https://jsfiddle.net/ka56qw6t/7/

我已在$('#ddlMinExp').change(function()中再添加一个条件来检查＆＃39; mints1＆＃39;的值，如果它的30然后增加＆＃39; ddlMaxExp＆＃39;由1。

Answer 2

我已编辑了您的整个代码，我认为它按预期工作，请查看jsfidde

    var selectedMinMnts = $('#ddlMntMin').val()!=="minuts"?Number($('#ddlMntMin').val()):null;

        updateMaxTime(selectedMinHrs,selectedMinMnts);
  });

    $('body').on('change', '#ddlMntMin', function() {
    var selectedMinHrs = $('#ddlHrsMin').val() !== "hour"?Number($('#ddlHrsMin').val()):null;
    var selectedMinMnts = $('#ddlMntMin').val()!=="minuts"?Number($('#ddlMntMin').val()):null;
        updateMaxTime(selectedMinHrs,selectedMinMnts);
    });

    function updateMaxTime(minHrs,minMnts){
        if((minHrs && minHrs != null)){
                if (minHrs < 12) {
                    //alert(selectedMinValue);
                    $(".ddlHrsMax option").remove();
                    for (i = minHrs; i < 12; i++) {
                        $('select.ddlHrsMax').append('<option value="' + i + '"' + '>' + i + '</option>');
                        //alert(i);
                    }
                }
        }

        if((minMnts && minMnts != null)){
            console.log(minMnts);
            if (minMnts === 30) {
                $(".ddlHrsMax option").remove();
                var j = minHrs + 1;
                for (j; j < 12; j++) {
                    $('select.ddlHrsMax').append('<option value="' + j + '"' + '>' + j + '</option>');
                    //alert(i);
                }
            } else {
                $(".ddlHrsMax option").remove();
                for (i = minHrs; i < 12; i++) {
                    $('select.ddlHrsMax').append('<option value="' + i + '"' + '>' + i + '</option>');
                    //alert(i);
                }
            }
        }


    }

})

比较选择框时间

2 个答案: