0

私は次のフォームを持っています。その目的は、どの状態が選択されているかを確認し、その値をスクリプトに渡すことです。スクリプトは、データベースに保存するための自動インクリメント ID を持つドロップダウン ボックスを動的に追加します。スクリプト エラーはありませんが、動的フィールドが表示されません。ちなみに、これはロブの作品http://www.web-design-talk.co.uk/58/adding-unlimited-form-fields-with-jquery-mysql/#comment-70752に基づいています。私がやっていることの欠点を誰でも見ることができますか。

<html>
<head>
<title>Form</title>
<script type="text/javascript" src="../lib/jquery/jquery-1.8.1.min.js"></script>
</head>

<body>

<form id="Form" name="Form" method="post" action="Form.php">
<fieldset>
<legend>Form</legend>

<label>Operations State: </label>
<select name="StateID" id="StateID">
<option value="">Select a State</option>
<option value="CA">CA</option>
<option value="NY">NY</option>
<option value="PA">PA</option>
</select>
<br>
<div id="container">
<p id="add_field">
<label><a href="#" onclick="getClass(StateID.value)">Add A Class Code</a></label>Please select a Class Code
</p>
</div>

</fieldset>
</form>

<script>
var i = 0;

function getClass(str){
var StateID = $("#StateID").val();

$('p#add_field').on('click', function(){
i += 1;

$('#container').before
if (StateID == "CA"){
    ('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="1">1</option><option value="2">2</option><option value="3">3</option>' + '</select><br>')
}

else if (StateID == "NY"){
    ('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="4">4</option><option value="5">5</option><option value="6">6</option>' + '</select><br>')
}

else if (StateID == "PA"){
    ('<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="7">7</option><option value="8">8</option><option value="9">9</option>' + '</select><br>')
}

else{
}

});     
}

</script>

</body>
</html>

前もって感謝します！

いくつかの編集の後、私は次のことを思いつきました...

<script>

var i = 0;

function getClass(){
var StateID = $("#StateID").val();

$('p#add_field').on('click', function(){
i += 1;

if (StateID == "CA"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="1">1</option><option value="2">2</option><option value="3">3</option>' + '</select><br>')
}

else if (StateID == "NY"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="4">4</option><option value="5">5</option><option value="6">6</option>' + '</select><br>')
}

else if (StateID == "PA"){
$('#container').before(
'<label>Select a Class Code</label>' + '<select name="ClassCode[]" id="ClassCode_' + i + '">' + '<option value="7">7</option><option value="8">8</option><option value="9">9</option>' + '</select><br>')
}   

else{
}

})
}

</script>

このバージョンでは StateID が表示され、新しい追加ごとにドロップダウン ボックスが変更されます。唯一の問題は、ID の自動インクリメント (ClassCode_1、ClassCode_2 など) とともに、ページに出力されるフィールド数もインクリメントすることです。それが分かればすごいことになる！

4

2 に答える 2

1

「getClass()」関数を正しく設定していません。コードの記述方法は、jQuery に引数として渡され、グローバル関数として宣言されていません。だからそれを宣言するだけです：

function getClass(str) {
  // ...
}

それができたら、完全な 1 つの DOM 要素を追加するように、コンテンツを追加するコードを変更したくなると思います。<label>and<select>を a<span>または何かで囲みます。

また、「i」はグローバル変数である必要があります。そうしないと、関数を呼び出すたびに 0 から開始されます。その宣言を「getClass」の外に移動します。

于 2012-10-01T17:01:50.713 に答える
1

ここでかなりの量が発生しようとしています。何が起こっているのかを理解できるように、物事を基本にまで単純化します。

onclick他のクリック ハンドラーを段落タグにアタッチしようとしているように見える、本質的にはクリック ハンドラー ( HTML 内) です。それはあなたが目指していることではないと思います。jQuery を使用しているため、jQuery ですべてを管理できる場合、クリックに onclick 属性を追加しても意味がありません。

手順は次のとおりです。

  1. リンクをクリックして、状態ドロップダウンの値を確認します。
  2. 以前に DOM に挿入されたドロップダウンを削除します。
  3. 値に応じたオプションを使用して、新しいドロップダウンを DOM に挿入します。

このFiddleを見てください。うまくいけば、すべてが基本に戻ります。これはあなたが求めていると思いますが、増加する ID で何をしようとしているのかはわかりません。それはあなたの判断に任せる必要があります。

于 2012-10-01T17:38:32.567 に答える