0

私はトリプル選択オプションメニューを持っていますが、これは今ではうまく動作しますが、PHP でポスト/エコーすると、オプション名と値の両方が同じになるため、名前が本であるカテゴリが必要な場合は、id= 2例。

オプションに別の値を入れる方法がわかりません。名前と値を分けてください。誰か教えてもらえますか???

オプション名を表示するために使用する同じ名前とは別の値が必要な場合を除いて、すべて正常に機能します。お分かりできると良いのですが。:)

私のコード:

<script type="text/javascript">

var categories = [];

categories["startList"] = ["Wearing Apparel","Books"];

categories["Wearing Apparel"] = ["Men","Women","Children"];
categories["Books"] = ["Biography","Fiction","Nonfiction"];

categories["Men"] = ["Shirts","Ties","Belts","Hats"];
categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];

categories["Biography"] = ["Contemporay","Historical","Other"];
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

var nLists = 3; // number of select lists in the set

function fillSelect(currCat,currList){

    var step = Number(currList.name.replace(/\D/g,""));

    for (i=step; i<nLists+1; i++) {
        document.forms['tripleplay']['List'+i].length = 0;
        document.forms['tripleplay']['List'+i].selectedIndex = 0;
    }

    var nCat = categories[currCat];

    for (each in nCat) {
        var nOption = document.createElement('option'); 
        var nData = document.createTextNode(nCat[each]); 
        nOption.setAttribute('value',nCat[each]); 
        nOption.appendChild(nData); 
        currList.appendChild(nOption); 
    } 
}

function init() {
    fillSelect('startList',document.forms['tripleplay']['List1'])
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);    

</script>




<form name="tripleplay" action="" method="post">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])" size="5">
</select>

<select name='List2' onchange="fillSelect(this.value,this.form['List3'])" size="5">
</select>

<select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)"  size="5">
</select>

<br><br>

<input type="submit" value="Submit" name="next" />
</form>


<?php 
    if($_POST['next'])
    {
        echo $_POST['List1'].'<br>'.$_POST['List2'].'<br>'.$_POST['List3'].'<br>';
    }
?>
4

2 に答える 2

0

あなたの意図を理解しているかどうかわかりませんが、フォームが送信されると、選択ボックスの値がサーバーに配信されます。

labelプロパティは UI に表示されます (テキスト ノードを追加する必要はありません) 。

valueプロパティとプロパティを適切に設定するとlabel、任意の値でフォームを送信できます。

たとえば、オプション構築コードは次のようになります。

var nOption = document.createElement('option'); 
nOption.setAttribute('value',each); 
nOption.setAttribute('label',nCat[each]); 
currList.appendChild(nOption);

そして、 を使用してラベルを取得できますthis.selectedOptions[0].label。

ノート：

  1. 使用しているコーディング スタイルはあまり良くありません。
  2. 主な問題を挙げると、インライン イベント処理を使用し、UI からビジネス ロジックを分離しません。
  3. jQuery などの JavaScript フレームワークを試してみることをお勧めします。これにより、車輪の再発明を防ぐことができ、開発が大幅に容易になり、実際の作業に時間を割くことができます (サーバー側の PHP フレームワークも検討できます)。

これは、あなたが望む効果であると私が信じていることを示すjsFiddleデモです。

編集：

より良いアプローチについて質問されたので、ロジックを少し抽象化し、UI から分離する 1 つの可能性について説明します。

これは、このような状況ではあまり役に立ちませんが、より複雑な場合には役立ちます。

  1. データを階層的に表現します。

    [{
    "id": 131,
    "label": "Wearing Apparel",
    "children": [{
        "id": 131,
        "label": "Men",
        "children": [{
            "id": 65,
            "label": "Shirts"
        }, ...
        ]
    }, {
        "id": 143,
        "label": "Women",
        "children": [{
            "id": 133,
            "label": "Blouses"
        }, 
        ...
        ]
    }]
]

    このようにして、PHP オブジェクトのツリー表現を JSON にエンコードできます。

  2. リストを表し、マークアップを生成する jQuery オブジェクトを作成します。これは、とにかく JavaScript なしではほとんど使用されないためです。

  3. より一般的なケースを処理できるようにユーティリティ クラスを作成するようにしてください。そうすれば、将来または現在の要件が変化したときに、コードに最小限の変更を加えて引き続き使用できます。
  4. 可能な限り (つまり、常に) インライン ハンドラーを避けるようにしてください。

私はjsFiddleの例を作成しましたが、これは完全ではありませんが、これらの原則のいくつかを示しています。それは、ほとんどのマークアップを独自に生成し、イベント自体を処理し、任意のさまざまな深さのデータを処理できます。

于 2013-08-12T15:00:06.393 に答える
0

私があなたの問題を理解しているなら

<option value="Wearing Apparel">Wearing Apparel</option>

値とテキスト (Wearing Apparel) が同じであること

まず、別の配列構造を使用します (ただし、json の方が適しています)。

categories["Books"] = [
                         ["Biography"],
                         ["Fiction"],
                         ["Nonfiction"]
                      ];

あなたのループ

    for (i=0; i<nCat.length; i++) {

        var nOption = document.createElement('option'); 
        var nData = document.createTextNode(nCat[i]);  // <------- use the "text"
        nOption.setAttribute('value',i);  // <------- use the index of the step
        nOption.appendChild(nData); 
        currList.appendChild(nOption); 

}

この場合

<option value="0">Wearing Apparel</option>

そして、あなたの POST 配列は次のようになります

Array ( [List1] => 0 
        [next] => Submit 
)

0 は「着用アパレル」要素の ID であり、1 は「本」の ID です

于 2013-08-12T15:46:37.537 に答える