JavaScriptを使用してページにドロップダウンを追加するにはどうすればよいですか？

私はシャツを注文するための注文書を持っています。私はドロップダウンを持って、ユーザーが選択したものに応じて、購入したい数を選択できるようにしたいと思っています。それぞれのシャツのサイズに対してドロップダウンを追加または削除します。JavaScriptを使用してページにドロップダウンを追加するにはどうすればよいですか？

最初にページに1つのサイズドロップダウンがあり、最初に数量ドロップダウンがあります。彼らが数量のドロップダウンから3を選択すると、余分なシャツに必要なサイズをユーザーが選択できるように、2つのサイズのドロップダウンが2つ表示され、使用可能なサイズがXXLから小さく表示されます。

どうすればいいですか？

これは、数量を選択したときに追加する必要があるサイズドロップダウンです。そして

<tr> 
    <td colspan="2" align="center"> 
     <p><img src="shirt.png" width="200" height="201" /></p> 
     <p>Size: 
      <label> 
       <select name="shirtsize" id="shirtsize" id="size"> 
        <option>please choose</option> 
        <option>Small</option> 
        <option>Medium</option> 
        <option>Large</option> 
        <option>XL</option> 
        <option>XXL </option> 
       </select> 
      </label> 
      <br /> 
      Price: $15.00 
     </p> 
    </td> 
</tr>

出典

2011-01-28 Ryan

何あなたのHTMLが見えますか？（あなたのhtmlの*記述ではなく、実際のhtmlです）。 –

それはかなり毛深くなるでしょう。彼らは10のシャツがほしいと言ってみましょう。次に、サイズごとに10個の選択ボックスがあります。あなたは、提出の反対側のそれぞれをつかむ必要があります。一度に1つのサイズのx量をカートに追加することを強制するのはもっともらしいですか？ –

実際、それは悪い考えではありません。各サイズの数量のテキストボックスを用意してください。私はそのことから過ぎ去った。 – Ryan

あなたはjQueryのを使用する場合は10を介して1と数量のドロップダウン：

<html> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    for (var i=1;i<10;i++){ 
     $('#num').append('<option value="' + i + '">'+ i +'</option>'); 
    } 
    var str = "<select><option>S</option><option>M</option><option>L</option></select>"; 
    $('#num').change(function(){ 
     var num = $('#num option:selected').val(); 
     $('#sizes').empty(); 
     for (var i =1; i<=num ; i++){ 
      $('#sizes').append($(str)); 
     } 
    }); 
}); 
</script> 
<body> 
<div>select amount:<select id="num"></select></div> 
<div>select size:<div id="sizes"></div></div> 
</body> 
</html>

出典

2011-01-28 20:38:50

JavaScriptを使用してページにドロップダウンを追加するにはどうすればよいですか？

答えて

関連する問題