19

ホストされている e コマース プラットフォームでフロント エンドの開発を行っています。システムは、顧客がカートに追加するアイテムの数量を選択するためのテキスト入力を送信しますが、私は選択したいと思います. この点に関してシステムが吐き出すマークアップにアクセスできないので、JavaScript を使用してテキスト入力をselect要素に変更したいと考えています。

jQuery を使用して select を削除し、適切な選択肢を持つ select で入力要素を複製しましたが、カートに何かを追加しようとすると、select の選択に関係なく、1 つの項目しか追加されません。

ネイティブ マークアップは次のとおりです。

<div id="buy-buttons">
  <label>Quantity:</label>
  <input name="txtQuantity" type="text" value="1" id="txtQuantity" class="ProductDetailsQuantityTextBox">
  <input type="submit" name="btnAddToCart" value="Add To Cart" id="btnAddToCart" class="ProductDetailsAddToCartButton ThemeButton AddToCartThemeButton ProductDetailsAddToCartThemeButton">
</div>

マークアップを更新するために実行している jQuery を次に示します。

 $("#txtQuantity").remove();
 $("#buy-buttons").append('<select id="txtQuantity" type="text" value="1" class="ProductDetailsQuantityTextBox"></select>');
 $("#txtQuantity").append('<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>');

これが機能しない理由を誰かが知っていますか? 選択は、テキスト入力と同じ方法でフォームを介して情報を送信するべきではありませんか?

ありがとう！

4

4 に答える 4

38

replaceWithとの代わりに使用removeしappendます。また、 のtypeアトリビュート<select>は不要であり、<option>ノードは 内にある必要があります<select>。http://api.jquery.com/replaceWith/replaceWithのドキュメントは次のとおりです。

$("#txtQuantity")
    .replaceWith('<select id="txtQuantity" name="txtQuantity" class="ProductDetailsQuantityTextBox">' +
          '<option value="1">1</option>' +
          '<option value="2">2</option>' +
          '<option value="3">3</option>' +
          '<option value="4">4</option>' +
          '<option value="5">5</option>' +
        '</select>');
于 2012-06-23T17:51:15.527 に答える
6

フィールド名を設定していません。選択に追加name='txtQuantity'します。name 属性がないと、フィールドの値はサーバーにポストされません。

またvalue='1'、(何もしていない) 選択を設定するのではなくselected='selected'、最初のオプションに追加します。結果は、デフォルトで最初のオプションが選択されている場合と同じです。

おそらく、上記のコードを使用して送信ボタンの後に選択することになります。ただし、それは別の回答でカバーされています。

于 2012-06-23T17:53:01.120 に答える
1

すでにドロップダウン/選択リストがあり、ラベル/テキストボックスから項目を追加したいだけの場合は、これを試すことができます:

 if ($(textBoxID).val() != '') {
                $(dropDownID)
                    .append($("<option></option>")
                        .attr('value', ($(textBoxID).val()))
                            .text($(textBoxID).val())).val($(textBoxID).val())
}
于 2012-06-23T18:15:17.840 に答える
0

typeからおよびvalueアトリビュートを削除し、省略し<select>たアトリビュートを追加しname="txtQuantity"ます。

于 2012-06-23T17:51:22.900 に答える