3

だから私はこのコードを持っています。そして、私はjavascriptの人にとっておそらく簡単なことを達成したいと思っています。特定のオプションが選択されている場合は、divに入力フィールドを追加します。

<select name="amount" >
    <option value="50">50$</option>
    <option value="100">100$</option>
    <option value="Other">Other</option>
</select>

<div id="custom_price">

</div>

したがって、 「その他」オプションが選択されたら、入力フィールドを追加したいと思います。これを回避する簡単な方法があることは知っていますが、機能させることはできません。

document.getElementById('custom_price').innerHTML += "<input type="text" name="amount"/>"

したがって、custom_divは次のようになります。

<div id="custom_price">
Custom price:<br>
<input type="text" name="amount"/>
</div>
4

5 に答える 5

6

最善の方法は、実際に dom 要素を作成することです。

var newInput = document.createElement("input");
newInput.type="text";
newInput.name="amount";
document.getElementById('custom_price').appendChild(newInput);

おそらく、次のようなハンドラーを使用します。

選択した ID を割り当てます。<select name="amount" id="amount">

$("#amount").change( function() {
 if( $(this).val() == "Other" ){
  document.getElementById('custom_price').innerHTML = "";
  var newInput = document.createElement("input");
  newInput.type="text";
  newInput.name="amount";
  document.getElementById('custom_price').appendChild(newInput);
 }
});
于 2012-08-14T19:16:37.517 に答える
3

質問のタグから判断すると、jQuery を使用しています。したがって、入力の追加はかなり簡単です。

$("select[name=amount]").change(function() {
    if ($(this).val() == 'Other') {
        $("#custom_price").append('<input type="text" name="amount"/>');
    }
})
于 2012-08-14T19:18:22.083 に答える
1

これは

document.getElementById('custom_price').innerHTML += '<input type="text" name="amount" />';

を使用して sring を開始する場合は、その中の文字を"スケープする必要があります"( \") または使用します'

于 2012-08-14T19:20:00.893 に答える
0

jQuery の使用

$("#custom_price").empty().append('Custom price:<br><input type="text" name="amount"/>')
于 2012-08-14T19:17:03.087 に答える
0

入力を div 内に配置し、最初は div を非表示にします。次に、必要に応じて jQuery/JS を使用してこの div を表示します。

$('select[name="amount"]').change(function() {
    if($(this).val() == 'Other') {
        $('#custom_price').show();
    } else {
        $('#custom_price').hide();
    }
});

<div id="custom_price" style="display: none;">
    <p>Custom price:</p>
    <input type="text" name="amount"/>
</div>
于 2012-08-14T19:17:53.727 に答える