Question

我试图为我的项目创建一个简单的时间选择器。有两个选项，包含23个选项值。当用户从第一个选择选项中选择一个值时，在该时间值将通过使用Jquery在display none css属性的帮助下隐藏在第二个选择选项上。下次用户从第一个选择选项中选择下一个值时，我无法从第二个选择选项中删除旧值中的显示。

var newForm = jQuery('<form>', {
                    'action': 'https://restore.com/download',
                    'method':'POST',
                    'target':'_blank',
                     'id':'newForm'
                });
                newForm.append("<input type='hidden' name='key' value='download'>")
                jQuery("#newForm").remove();
                jQuery("body").append(newForm)
                jQuery("#newForm").submit();

Answer 1

在每次更改时，您应首先显示所有选项，然后隐藏您刚刚选择的特定选项（在第一次选择时）。

以下是一个例子：

$(document).ready(function(e) {
  $('#TimeFromID').change(function(){
    $("#TimeToID option").show();
    var val = $(this).val();    
    if(val) {
      $("#TimeToID option[value='" + val + "']").hide();  
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time-from"> 
<select id="TimeFromID" name="TimeFrom">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>
<div class="time-to"> 
<select id="TimeToID" name="TimeTo">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>

Answer 2

您的if语句刚刚检查了所选的值是否真实（并且适用于所有选项，因此它没有任何意义。您更愿意隐藏具有所选值的选项并显示所有其他选项（=其兄弟姐妹）：

＆＃13;

$(document).ready(function(e) {

$('#TimeFromID').change(function(){
    var val = $(this).val();    
    $("#TimeToID option[value='" + val + "']").hide().siblings().show();  
 });

 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time-from"> 
<select id="TimeFromID" name="TimeFrom">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>
<div class="time-to"> 
<select id="TimeToID" name="TimeTo">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>

＆＃13;

我想在日期范围选择器的上下文中实际上有意义的是，不仅可以显示所选值，还可以显示所有较低值。所以这是如何实现这一目标的：

＆＃13;

$(document).ready(function(e) {

$('#TimeFromID').change(function(){
    var val = $(this).val();    
    $("#TimeToID option[value='" + val + "']").siblings().show().end().prevAll().addBack().hide();
 });

 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="time-from"> 
<select id="TimeFromID" name="TimeFrom">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>
<div class="time-to"> 
<select id="TimeToID" name="TimeTo">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>

＆＃13;

Answer 3

你试过的JQuery没有在ELSE部分工作。更好的解决方案是显示所有选项，然后隐藏您不想要的选项。

以下是您正在寻找的JQUERY：

＆＃13;

$(document).ready(function(e) {
    $(document).on('change', 'select#TimeFromID', function(event) {
        var val = $(this).val();    
        if(val)
        {
            $('#TimeToID option').show();
            $("#TimeToID option[value='" + val + "']").hide();  
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div class="time-from"> 
        <select id="TimeFromID" name="TimeFrom">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
        </select>
    </div>
    <div class="time-to"> 
        <select id="TimeToID" name="TimeTo">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
        </select>
    </div>
</body>

＆＃13;

如何从jquery中的选项标签中删除display none？

3 个答案: