0

1つのページに3つの選択ボックスがあり、最初の選択ボックスで選択が行われるまで2番目と3番目の選択ボックスを無効にし、2番目の選択ボックスで選択が行われるまで3番目の選択ボックスを無効のままにします。そして、最初の選択ボックスで行った選択の基礎として、2番目の選択ボックスにデータを入力したいと思います。たとえば、サムスンが最初のボックスで選択された場合、サムスンのモデルは2番目の選択ボックスにのみ表示されます。

これはmHTMLコードです。

<html>
<head>


<style>
select {
  -webkit-appearance:none;
  background-color:#58B14C;
  background-position:initial initial;
  background-repeat:initial initial;
  border:0;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  color:#EEEEEE;
  font-size:14px;
  font-weight:bold;
  margin-left:3px;
  padding:2px 10px;
  width:347px;
  background:url("img/arrow.gif") no-repeat scroll 316px 6px black;
  background-size: 16px;

}
select option{
    background-color: black;
}
#mainselection { overflow:hidden; width:352px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 10px 10px 10px black;
background:grey; 
float: left;
}

.stepsClass{
    float:left;
}
body{
    background-color: whitesmoke;
}
</style>

</head>
<body>
    <form style="position:absolute;left: 15%;top: 25%;">
        <div class="stepsClass"><input type="image" src="img/step1.png"></br><div id="mainselection">
    <select id="Brand">
<option>Select your cellphone Brand</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
    </div></div>
      <div class="stepsClass"><input type="image" src="img/step2.png"></br>  <div id="mainselection">
<select id="Model">
<option>Select your cellphone Model</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
          </div></div>
        <div class="stepsClass"><input type="image" src="img/step3.png"></br>
        <div id="mainselection">
<select id="Carrier">
<option>Select your Carrier</option>
<option>Blackberry</option>
<option>I-phone</option>
<option>Samsung</option>
<option>HTC</option>
<option>Nokia</option>
<option>Motorola</option>
</select>
        </div></div>
    </form>
</body>
</html>

この質問とは関係がないと思われる画像をアップロードしなかったことをお詫び申し上げます。jQueryでjavascriptを書く方が簡単だと思う人がいるので、jQueryタグも追加しています。どんな助けでもいただければ幸いです。

4

3 に答える 3

2

HTML 選択オプションを変更して、value 属性を追加しました。これにより、最初の選択ボックスで行われた選択に基づいて、2 番目の選択ボックスに入力できるようになると思います。

  <select id="Brand">
  <option value = "">Select your cellphone Brand</option>
  <option value = "BB">Blackberry</option>
  <option value = "ios">I-phone</option>
  <option value = "sam">Samsung</option>
  <option value = "htc">HTC</option>
  <option value = "nokia">Nokia</option>
  <option value = "mot">Motorola</option>
  </select>


<select id="Model" >
    <option>Select Your Model No.</option>
</select>
Javascrpt



$(function(){
    $("#Model").attr("disabled","true");
    $("#Brand").change(function(){
        if(this.value != ""){
          $('#Model').removeAttr('disabled');
           var brand = $("#Brand option:selected").text();
            document.getElementById("Model").options.length = 1;
            for(var i = 0; i < 10 ;i++){
                var selectOption = document.createElement("OPTION");
                selectOption.text = brand + " Model No." + i;
                document.getElementById('Model').appendChild(selectOption);
            } 
$("#Model").selectmenu("refresh","true");            
        }
        else{
            $("#Model").attr("disabled","true"); 
            $("#Model").val("");            
            $("#Model").selectmenu("refresh","true");      
        }
    });
})

それがあなたの目的に役立つことを願っています。

于 2012-11-28T07:19:16.913 に答える
1

追加して必須 (2 番目と 3 番目) のリストを無効にしますdisabled="disabled"

$(function(){
      // The following will enable the 2nd drop down list when 1st one will be changed/selected.
      $('#Brand').change(function(){
         $('#Model').removeAttr('disabled');
      });   

      // This block will enable the 3rd list when you change the 2nd list.
      $('#Model').change(function(){
         $('#Carrier').removeAttr('disabled');
      }) ;
});
于 2012-11-28T06:02:07.333 に答える
0

次のようにjqueryでcopmboboxを無効にすることができます：

$("#cbCountry").combobox("option", "disabled", true);

条件を確認し、条件に従ってコンボボックスを無効にします

于 2012-11-28T06:10:48.840 に答える