0

Web ページのコンボボックスを作成しました。ユーザーからテキストボックスに値を取得し、テキストボックスでダブルクリックしてリストに追加します。ユーザーが入力した値をリストのオプションとして永続的に保存したいと考えています。どうすればできますか。もう 1 つの質問は、リスト内のオプションの数を数えて、その隣に要素を追加するにはどうすればよいかということです。これが私のコードです。

<html>
<head>
<script language="javascript">
function AddListItem(form)
{

var TestVar = form.txtInput.value;
form.txtInput.value = "";
form.select.options[3]=new Option(TestVar, TestVar, true);

}
</script>
<head>

<body>
<form id='Form1'>
<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="AddListItem(this.form)"/>
<p>
<select id='select'>
<option>abc</option>
<option>cde</option>
<option>efg</option>
</select>
</form>
</body>
</html>
4

3 に答える 3

0

永続的に追加するには、サーバー側のスクリプトが必要です。

一時的に追加するには、javascript を使用できます。

function addVal(newVal) {
  var sel = document.getElementById('select');
  var opt = document.createElement("OPTION");

  sel.addChildNode(opt);
  opt.innerHTML = newVal;
  opt.value = newVal; //(alternatively)
}

オプションの数を数えるには:

function countOpts() {
  var sel document.getElementById('select');
  return sel.options.length;
}

(概念的な使用のみ、機能としてテストされていません)

于 2010-10-15T07:44:57.470 に答える
0

<option>次のように動的に追加します。

function add(selectId, optText, optValue)
{
    var newOption = document.createElement("option") 
    newOption.text = optText;
    newOption.value = optValue;
    document.getElementById(selectId).options.add(newOption);
}

selectId は の ID <select>、optTextはドロップダウンに表示されるテキスト、optValueはサーバーに送信される値です。

あなたのコードでは、次のように呼び出します

<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="add('select', this.value, this.value)"/>

ご覧のとおり、オプションの長さを実際に見つける必要はありませんが、次の方法で実行できますoptions.length。

document.getElementById(selectId).options.length;

そうは言っても、

  1. たとえば、これをドロップダウンに追加したり、サーバーに渡したり、テーブルに追加したりすることができます。ドロップダウンに追加するときに、AJAX を介してその呼び出しを行う必要がある場合があります
  2. テキストボックスをダブルクリックして新しい項目を追加するのはあまり使い物になりません。オンブラーはオプションかもしれません。textbox の後に「追加」ボタンを配置することをお勧めします。
于 2010-10-15T07:45:18.310 に答える
0

その場合、サーバー側のスクリプトが必要なようです。フォームを送信すると、すべてのドロップダウン オプションを「記憶」しているフィールドを持つことができます。

簡略化された HTML:

<form method='post' action=''>
  <input name='newDDoption' />
  <input type='hidden' name='ddStorage' value='<?PHP echo implode("|||",$ddOptions); ?>' />
  <button>GO</button>
</form>

単純化された PHP:

<?PHP
$ddOptions = explode("|||",$_POST['ddStorage']);
$ddOptions[] = $_POST['newDDoption'];

echo "<select>";
for($x=0;$x<count($ddOptions);$x++) {
  echo "<option>".$ddOptions[$x]."</option>";
}
echo "</select>";
?>

説明するには: PHP はフォームに ddOptions を保存します -> ユーザーが新しいオプションを入力します -> フォームが送信されます -> PHP は保存された値を見つけます -> PHP は新しい値をプッシュします -> PHP はループして永続的なドロップダウン メニューを作成します。

于 2010-10-18T08:42:55.477 に答える