1

ドロップダウンに基づいてjqueryを使用してフォームに入力します人数と歩行者の数を処理するドロップダウンが1つあります選択した人数に基づいてdivでhtmlを生成しますが、非常に多くのフィールドがあり、それらを変数に取りましたが、 HTMLでスペースを使用するとエラーが表示されるため、これに代わるものは何ですか?forループで変数を使用してhtmlを生成するにはどうすればよいですか?

<script src="http://code.jquery.com/jquery-1.9.1.js"></script></script>
<script>
$(document).ready(function () {
    $("#num-people").change(function () {
        var countP = parseInt($("select#num-people option:selected").val());

        $("#walker option").each(function (index) {
            if (countP < index) {
                var newindex = index

                $("#walker option[value=" + newindex + "]").remove();
            }

        })
        for (var i = 1; i <= countP; i++) {
            $("#walker option[value=" + i + "]").remove();
            var j = i + 1;

            $('#walker').append(new Option('walker' + i, i));
            var walk = "#walker";
            var formhtml =
                "<div id=walker" + i + " style='display:none'>First Name:<input type='text' name='wname" + i + "' id='wname" + i + "'>Last Name:<input type='text' name='lname' id='lname'></div>";

            //generate waler if not exist
            if ($(walk + i).length == 0) {

                $('#form_div').append(formhtml);
            }
            //display walker                            
            $("#walker").change(function () {
                var numwalker = parseInt($("select#walker option:selected").val());

                $('#walker' + numwalker).css('display', 'block');
            })
        }
    })
});
</script>

<select name="num-people" id="num-people">
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
<option name="4">4</option>
<option name="5">5</option>
<option name="6">6</option>
</select>

<select name="walker" id="walker">
<option value="">Select Walker</option>
</select>


<div id="form_div">

</div>

変数にスペースを含むhtmlを使用するとエラーが表示され、管理するフィールドがたくさんあるので、div idなどに可変値を動的に保持する方法..（phpコードを使用するか、jqueryを使用しますが、htmlを生成する方法が異なります）

var formhtml=
"<div id=walker"+i+" style='display:none'>
First Name:<input type='text' name='wname"+i+"' id='wname"+i+"'>
Last Name:<input type='text' name='lname' id='lname'>
</div>";
4

1 に答える 1

0

" +で各行を閉じ、各行を再度開くことができます"

var formhtml=
"<div id=walker"+i+" style='display:none'> " +
"First Name:<input type='text' name='wname"+i+"' id='wname"+i+"'> " +
"Last Name:<input type='text' name='lname' id='lname'> " +
"</div>";

または、改行をエスケープすることができます\

var formhtml=
"<div id=walker"+i+" style='display:none'> \
First Name:<input type='text' name='wname"+i+"' id='wname"+i+"'> \
Last Name:<input type='text' name='lname' id='lname'> \
</div>";
于 2013-07-06T14:04:25.350 に答える