Question

我已经设法向最终用户提供了一个删除列表，默认情况下包含4个项目(value=a,value=b,value=c,value=d)。当用户单击复选框时，下拉列表的内容仅更改为2个项(value=a,value=b) IF未选中，返回默认状态。

我使用隐藏div在下面实现这种方式，但想知道是否使用Jquery更好的不同方式，我已经搜索并且无法想象它如果检查现在这些选项存在默认值。目前我必须使用2个不同的下拉列表，这在表单中传递值时很难。

THE CHECKBOX

 <label for="optionChoice"><input class="optionChoice" type="checkbox" id="optionChoice"         name="optionChoice" value="YES" onClick="if(this.c.........

在我的PHP页面中，我有2个DIV，其中一个是可见的，而另一个并非全部依赖，如果CHECKBOX点击了一个可见的和其他不可见的VISVERSA。

    <div id="test">
           <table class="TableStyle">
            <tr>
             <td>
               <label for="serviceType">Service Type<font color="red"><b> * </b></font></label>
              </td>
            </tr>
            <tr>
              <td>
                <select name="serviceType" id="serviceType">
                     <option value="" label="-- Choose One --"> -- Choose One --</option>
                     <option value="A" label="A">A</option>
                      <option value="B" label="B">B</option>
                     <option value="C" label="C">C</option>
                      <option value="D" label="D">D</option>
                </select>
              </td>
           </tr>
    </table>
 </div>
  <div id="test2">
       <table class="TableStyle">
              <tr>
                 <td>
                    <label for="serviceType2">Service Type<font color="red"><b> * </b></font></label>
                 </td>
              </tr>
             <tr>
                 <td>
                     <select name="serviceType2" id="serviceType2">
                        <option value="" label="-- Choose One --"> -- Choose One --</option>
                         <option value="A" label="A">A</option>
                          <option value="B" label="B">B</option>
                      </select>
                   </td>
             </tr>
            </table>
         </div>


    script

        $(function() {
            enable_cbChoice();
            $("#optionChoice").click(enable_cbChoice);
        });
        function enable_cbChoice() {
            if (this.checked) { 
                $("#test").hide();
                $("#test2").show();
            }
            else{
                $("#test").show();
                $("#test2").hide();
            }
        }

Answer 1

尝试只有一个下拉列表（id =“serviceType”），然后根据复选框的状态添加或删除选项：

var detached;
$('#optionChoice').on('change', function() {
    var $el = $(this);

    if( $el.prop('checked') ) {
        detached = $('option[value="C"], option[value="D"]').detach();   
    } else {
       $('#serviceType').append(detached);
    }
});

工作小提琴：http://jsfiddle.net/jhummel/D43fh/

Answer 2

您可以通过使用javascript检测复选框的状态来实现此目的。我可以使用jquery向您展示该方法。然后，您可以使用jquery的remove和append函数来添加和删除下拉列表中的值。为了解决您的问题，您可以这样做。

$('input[type="checkbox"]').click(function() {
    if( $(this).is(':checked') ) {
        $("#selectBox option[value='C']").remove();
        $("#selectBox option[value='D']").remove();
    } else {
        $('#selectBox').append('<option value="C">C</option>');
        $('#selectBox').append('<option value="D">D</option>');
    }
});

选中时更改下拉内容

2 个答案: