1

onclick関数でjavascriptを使用して非表示タイプの入力ボックスとラベルを作成する方法を知りたいです。

$().ready(function() {  
    $("#product").autocomplete("get_completeproducts", {            
        width: 406,
        matchContains: true,
        selectFirst: false
    });
});


<input type="text" value="" name="product" id="product" size="50">
<input type="button" value="Add to List" onclick="addprotolist()" name="select_pro">

私はajaxオートコンプリートを介して上記の入力ボックスの値を取得しています。ユーザーは選択ボックスをクリックします。次に、入力ボックスの下に選択した電話の数をリストに追加する必要があります。

<label>Samsung Galaxy Y<label><input type="hidden" value="778" name="pro_id[]">
<label>Samsung Galaxy Y Duos<label><input type="hidden" value="788" name="pro_id[]">
<label>Samsung Galaxy Y Plus<label><input type="hidden" value="728" name="pro_id[]">
.
.
.
<input type="submit" name="save" value="Save your list">

javascriptまたはjqueryを使用してこれをコーディングする方法を誰でも教えてくれます。

4

1 に答える 1

4 
function addprotolist() {
  var str = '<label>'+ var_for_text +'</label><input type="hidden" value="'+ var_for_value +'" name="pro_id[]">';
  $('#yourform').append( str );
}

ノート

ループを使用して複数などを追加する場合はinput、labelループ内で追加を呼び出さないでください。パフォーマンスが低下します。上記のような文字列を作成.append()し、最後にループ外で呼び出します。

例えば

var str = '';
function addprotolist(inputObj) {

  // a typical example of inputObj may be
  // inputObj = [ {labelText: 'some 1', value: 'val1' }, {labelText: 'some 2', value: 'val2'} ]

  // loop
  for(var i = 0; i < inputObj.length; i++ ) {
    str += '<label>'+ inputObj[i].labelText +'</label><input type="hidden" value="'+ inputObj[i].value +'" name="pro_id[]">';
  }

  // call append outside of loop
  $('#yourform').append( str );
}

しかし、この方法では、を使用することは実際には意味がありませんlabel。inputラップするかfor、入力を指す属性を指定することによって、接続する必要がありますid。

<!-- Simple label example with for attribute -->  
<input type="radio" name="clickmebutton" id="clickmebutton">
<label for="clickmebutton">Click me</label>  

<!-- or more simply -->  
<label><input type="radio" name="clickmebutton"> Click me</label>

MDNからlabel

于 2012-06-29T08:49:02.913 に答える