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

这里是更新版本我卡住了

<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>

名字*
姓*
模型*
Ghd
吹风机
你的电子邮件*
模型
Ghd Mk5.0
糖果
糖果
楔子
模型
玩具
游戏
卡通片
请尽可能输入ghd订单号

你的问题*
$（'input[name=checkdrop]'）。单击（函数（）{
如果（选中此项）{
console.log（this.value）；
$（'#'+this.value）.parent（）.show（）；
}否则{
$（'#'+this.value）.parent（）.hide（）；
}
});
函数ckChange（ckType）{
var ckName=document.getElementsByName（ckType.name）；
选中的变量=document.getElementById（ckType.id）；
如果（选中。选中）{
对于（变量i=0；i

---

现在，当我加载页面时，2下拉框在页面加载时可见，它需要单击打开/关闭复选框才能删除，然后显示它，如何删除页面加载时的下拉框

第一个id对于每个网页都是唯一的

下拉列表

您不能在两个下拉列表上使用相同的id（如果您这样做，它将只选择第一个）（因此使用

dropdown1

，

dropdown2

等）

第二，为radio添加值以匹配下拉列表id，这样您就可以轻松地定位下拉列表并使其动态化（如果您有50个radio/dropdown，则不必编写附加js代码）

第三，如果选中此项，则使用

$（'#'+this.value.）.parent（）.show（）；

显示下拉列表，否则将其隐藏

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

$（'input[name=checkdrop]'）。单击（function（）{
如果（选中此项）{
//取消选中所有其他复选框
$（'input[name=checkdrop]'）。不是（this）.prop（'checked'，false）；
//先隐藏所有下拉列表
$（'.dropdown'）.hide（）；
//显示选中的一个
$（'#'+this.value）.parent（）.show（）；
}否则{
$（'#'+this.value）.parent（）.hide（）；
}
})；

。下拉列表{
显示：无；
}

下拉列表1

下拉列表2

糖果
糖果
楔子
玩具
游戏
卡通片

仅允许选中1个复选框的可能重复您可以查看我更新的帖子，我发现很难隐藏页面上的下拉列表load@user3695970第一，您没有使用

}

关闭

值更改的
函数，第二，只需添加
$（“.answer”）.hide（）
之后，在页面加载时，你用class隐藏所有元素
答案
首先我爱你我爱你我爱你我爱你我爱你我爱你我的复选框代码模型如何coe模型文本不显示先生，但下拉菜单显示干杯