1

<select>0〜10の番号が付けられた2つのフィールドを含むフォームがあります。

両方のフィールドの数に応じて.append <input>フィールドを設定しようとしています値#myDiv<select>

私はすでにこれを持っています：

jQuery(function($){
        $('select[name="nb_adultes"], select[name="nb_enfants"]').change(function() {
            var nb = $(this).val(); //the value of select
        });
});

たとえば、ユーザーは最初から「2」<select>、2番目から「4」を選択すると、次の<select>ように追加されます：4 + 2：「6」入力フィールド"#myDiv"

重要：追加される入力の数は、可能であれば「10」を超えることはできません。

私がはっきりしていることを願っています、助けてくれてありがとう！

4

4 に答える 4

0

選択ボックスのIDが次のようになっていると仮定します：'nb_adultes'および'nb_enfants'

jQuery(function($){
        $('#nb_adultes, #nb_enfants').change(function() {
            var nb = $('#nb_adultes').val() + $('#nb_enfants').val(); //the value of select
            if(nb >10)
              alert("Sum should not be greater then 10");

        });
});
于 2012-04-25T14:34:12.980 に答える
0

かなり単純なアプローチ：

/* Cache selectors, and set limitation variables */
var adults = $("#adults"),
    infant = $("#infants"),
    msgDiv = $("#mydiv"),
    vLimit = 10;

/* Bind to adults and infants some onChange logic */
$(adults).add(infant).on("change", function(){
  /* Determine values, addition, and results */
  var aValue = parseInt( adults.val(), 10 ),
      iValue = parseInt( infant.val(), 10 ),
      result = aValue + iValue,
      differ = result - vLimit;

  /* If the user selected too many, inform them */
  if ( differ > 0 ) {
    /* Invalid amount: x too many. */
    msgDiv.html("Invalid amount: %d too many.".replace( /%d/, differ ));
    return;
  }

  /* Clear msgDiv, fill it with x input elements */
  var i = 0; msgDiv.empty(); 
  while ( i++ < result ) $("<input/>", { id: 'element'+i }).appendTo(msgDiv);
});

デモ： http： //jsbin.com/etawas/8/edit

于 2012-04-25T14:45:10.650 に答える
0 
jQuery(function($) {
    $('select[name="nb_adultes"], select[name="nb_enfants"]').change(function() {
        var total = parseInt($('select[name="nb_adultes"]').val()) + 
                    parseInt($('select[name="nb_enfants"]').val());
        if (total > 10) {
            alert("it cannot be higher than 10");
        } else {
            $("div").empty();
            for(var j=0; j < total; j++) 
              $("div").append('<input type="text" value="'+j+'"/><br />');
        }
        });
    });​

デモ

于 2012-04-25T14:47:08.060 に答える
0

2つの値を数値として取得し、数値でない場合は入力をリセットし、合計が10未満の場合にのみ更新します。

jQuery(function($){
  $('select[name="nb_adultes"], select[name="nb_enfants"]').change(function() {

    // the value of select option
    var nb = parseInt($(this).val());

    // the input
    var totalInput = $('#total');

    // if the input is user editable make sure they didn't put a non-numer in there
    if(isNaN(totalInput.val())) totalInput.val('');

    // get the total of the input
    var total = parseInt($('#total').val());

    // add the selected option if its less than 10
    if(total + nb <= 10) totalInput.val(total + nb);

    // do whatever you like or nothing if there are more than 10
    else { alert('more than 10);
  });
});
于 2012-04-25T14:47:59.203 に答える