Question

这里是更新版本卡住了。

<base href="http://skins4device.com"/>
<link rel="stylesheet" href="/gasss/css/ghd.css" type="text/css" media="all"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<fieldset>

<form id="processContactUs" name="processContactUs" action="/send_form_email.php" method="POST">

<div>


<label for="firstName">First name<span class="required">*</span></label>
<input id="firstName" name="firstName" value="" type="text">
</div>
<div>



<label for="lastName">Surname<span class="required">*</span></label>
<input id="lastName" name="lastName" value="" type="text">
</div>
<div class="option">

<label for="gender">Model<span class="required">*</span></label>
<div class="gender radio-pair">
<span><input id="gender1"  name="checkdrop" class="checkdrop" value="Ghd" onClick="ckChange(this)" type="checkbox"><label 

for="gender1" onClick="ckChange(this)" >Ghd</label></span>

<span><input id="gender2" name="checkdrop" class="checkdrop" value="Hair" onClick="ckChange(this)" type="checkbox" ><label 

for="gender2">Hair Dryer</label></span>
</div>
</div>
<div>


<label for="email">Your email<span class="required">*</span></label>
<input id="email" name="email" value="" type="email">
</div>




 <div class="answer"><label for="dropdown" class="answer">Model</label>
  <select id="Ghd" name="dropdown" checked class="dropdown">
    <option>Ghd Mk5.0</option>
 <option>sweets</option>
<option>candies</option>
<option>choclate</option>
  </select>
</div>

<div class="answer"><label for="dropdown" class="answer">Model</label>
  <select id="Hair" name="dropdown" class="dropdown">
    <option>toys</option>
    <option>games</option>
    <option>cartoons</option>
  </select>
</div>





<div class="opts">
<p>Please enter your ghd order number where possible</p>
</div>

<div class="textbox">


<label for="query">
                            Your query<span class="required">*</span>
                        </label>
                        <textarea id="query" name="query"></textarea>

                    </div>
                    <div class="opts">

                    </div>
                    <div class="buttons">
                        <input name="contactUs" value="Submit" type="submit">
                    </div>
                </form></fieldset>

            </div>
<script type="text/javascript">
$('input[name=checkdrop]').click(function() {
  if (this.checked) {
    console.log(this.value);
    $('#' + this.value).parent().show();
  } else {
    $('#' + this.value).parent().hide();
  }
});
</script>
<script>
function ckChange(ckType){
    var ckName = document.getElementsByName(ckType.name);
    var checked = document.getElementById(ckType.id);

    if (checked.checked) {
      for(var i=0; i < ckName.length; i++){

          if(!ckName[i].checked){
              ckName[i].disabled = true;
          }else{
              ckName[i].disabled = false;
          }
      } 
    }
    else {
      for(var i=0; i < ckName.length; i++){
        ckName[i].disabled = false;
      } 
    }    
}
</script>
<script type="text/javascript">
function valueChanged()
{
    $(".answer").hide();
$(".checkdrop").click(function() {
    if($(this).is(":checked")) {
        $(".answer").show();
    } else {
        $(".answer").hide();

    }
});
</script>

现在当我加载页面时，在页面加载时可以看到2下拉框，它需要单击复选框打开/关闭以删除然后显示它，如何删除页面加载下拉列表

Answer 1

第一个ID对于每个网页dropdown都是唯一的，您不能在两个下拉列表中使用相同的ID（如果您这样做只会选择第一个）（因此使用dropdown1， dropdown2等）

第二个向广播添加值以匹配下拉列表ID，这样您就可以轻松定位下拉列表并使其成为动态（如果您有50个广播/下拉列表，则不必编写额外的js代码）

如果选中此选项，则显示第3个下拉列表$('#' + this.value).parent().show();否则只需隐藏它。

更新：任何时候只允许1个复选框

＆＃13;

$('input[name=checkdrop]').click(function() {
  if (this.checked) {
    //uncheck all other checkbox
    $('input[name=checkdrop]').not(this).prop('checked', false);
    //hide all dropdown first
    $('.dropdown').hide();
    //show the checked one
    $('#' + this.value).parent().show();
  } else {
    $('#' + this.value).parent().hide();
  }
});

＆＃13;

.dropdown {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="checkbox" name="checkdrop" value="dropdown1" />Dropdown 1<br />
<input type="checkbox" name="checkdrop" value="dropdown2" />Dropdown 2<br />


<div class="dropdown">
  <select id="dropdown1" name="dropdown">
    <option>sweets</option>
    <option>candies</option>
    <option>choclate</option>
  </select>
</div>

<div class="dropdown">
  <select id="dropdown2" name="dropdown">
    <option>toys</option>
    <option>games</option>
    <option>cartoons</option>
  </select>
</div>

＆＃13;

选中复选框时，html下拉列表更改值

1 个答案:

更新：任何时候只允许1个复选框