1

jQuery Mobile を使用して、ユーザーが選択メニューから選択した値に基づいて動的入力テキスト フィールドを追加したいと考えています。

ユーザーが子供の数を選択すると、その子供の名前と誕生日を尋ねる 2 つの新しい入力ボックスが表示されるアプリを作成しています。

これら 2 つのボックスは、ユーザーが選択した値に基づいて表示されます。ユーザーが 2 つを選択した場合は、4 つの入力ボックスが表示されます。

また、jQuery Mobile を使用してこれらの入力ボックスから値を読み取る方法も知りたいです。ここにいくつかのHTMLコードがあります

    <li data-role="fieldcontain"> 
       <label for="children" class="select">Number of Kids</label>
       <select name="children" id="children" data-mini="true">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
       </select> 
   </li>
4

2 に答える 2

2

選択された子の数に基づいて入力の数を作成するには、次のようにします。

$(document).on('pageinit',function(){ // use this instead of dom ready, .on is dependent upon jQuery 1.7 + use bind or delegate if you have older version
    $('#children').on('change',function(){ // this function runs each time the select menu is changed
        children = $(this).val(); //set variable for number of children

        while(i <= children){ //loop through as long as i is less than number of children
            $('form').append('<label>Name</label><input type="text" name="child'+i+'Name" /><label>Age</label><input type="text" name="child'+i+'Age" />'); // append the input to form
            i++ // add one to our incremnt variable  
        }

        $('.ui-content').append('<input type="submit" value="Submit" />'); // add our submit button on end
        $('.ui-page').trigger('create'); // then tell JQM to recreate page because we added new content
    });
});​

これがその実際の例です-> http://jsfiddle.net/codaniel/CDUth/1/

値の読み取りに関しては、.val() を使用したことがわかります。これは、特定の入力を読み取る最も簡単な方法です。その他の例については、ドキュメントを確認してください-> http://api.jquery.com/val/

serialize() のようにフォーム全体をシリアライズすることもできます。詳細はこちら - > http://api.jquery.com/serialize/

于 2012-05-17T12:17:44.120 に答える
0

これは、コダニエルが持っていたもののわずかに改良されたバージョンです。彼は良かったのですが、送信ボタンを追加するなどの「バグ」はほとんどなく、たとえば1人の子に戻すと、入力の数は変わりません。

var html = '';
$('#children').on('change', function() {
   children = $(this).val();
   html = '';

   for (var i = 0; i < children; i++) {
        html += '<label>Name</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Age</label><input type="text" name="child' + i + 'Age" id="textAge' + i + '" />';
   }

   $('#kidsFields').html(html);
   $('#kidsFields').append('<input type="submit" value="Submit" />');

   $('.ui-page').trigger('create');
});

http://jsfiddle.net/HwFFU/1/

値を読むことに関しては、あなたがそれらで何をしたいのかを知らずにそれを手伝うのは難しいです。しかし、Codanielが言ったように、最も簡単なのは、入力をループし、.val（）を使用してテキストを内部に取得することです。

于 2012-05-18T21:57:38.197 に答える