2016-12-19 9 views
0

私は最近、PHPを使用して選択タグ内にオプションを作成することが不可欠なウェブサイトで作業していました。すべての主要なブラウザで、選択フォームをクリックすると、わずかにクリックしたアニメーションが表示されますが、メニューは表示されません。実際の例はhttps://wilsonandsonproductions.com/buy.php?id=0&mode=clientです。 PHPは正しいタグを作成するように見えるので、どこで間違いを犯したのか分かりません。ここでは、ソースコードの一部です:タグを選択できない

<select name="opt" id="opt"> 
    <label>Select a size:</label> 
    <optgroup label="Metal Print with Wall Mount"> 
    <!-- Metal prints in form 0e1, w/ 0 as id & 1 as selected option --> 
    <?php foreach($pdata["metal"] as $opt){$o=array_search($opt,$pdata["metal"]); echo '<option value="e'.$o.'">'.$opt["label"].' ($'.$opt["price"].')</option>';} ?> 
    </optgroup> 
    <optgroup label="Traditional Matted Print"> 
    <!-- Traditionl Matted prints in form 0a1, w/ 0 as id & 1 as selected option --> 
    <?php foreach($pdata["matted"] as $opt){$o=array_search($opt,$pdata["metal"]); echo '<option value="a'.$o.'">'.$opt["label"].' ($'.$opt["price"].')</option>';} ?> 
    </optgroup> 
</select> 

変数$ PDATAは、JSONファイルからロードされ、ここに含ま:

{ 
"metal" : [ 
    { 
     "label" : "8x10", 
     "price" : 75 
    }, 
    { 
     "label" : "8x12", 
     "price" : 85 
    }, 
    { 
     "label" : "8.5x11", 
     "price" : 95 
    }, 
    { 
     "label" : "10x14", 
     "price" : 115 
    } 
], 
"matted" : [ 
    { 
     "label" : "5x7 print inside 8x10 mat", 
     "price" : 50 
    } 
] 
} 

をすべてのヘルプははるかに高く評価されるだろう!

+1

バックグラウンドでクリック/キーボードのキーストッパーを使用していますか? – Stewartside

+3

あなたが実際にそれをクリックすることができます選択したように見えますが、ページ全体のクリックをブロックします。また、それらの写真を本当に望んでいる人のために、それらを止めるつもりはありません.... –

+0

@LeoWilsonできますブロックのクリックに使用しているコードをページに含めますか? – Stewartside

答えて

1

あなたの代わりにラベルタグの属性ラベルでOPTGROUPタグを含むようにHTMLを更新していることが表示されます。選択タグには、オプションoptgroupタグしか含まれていない可能性があります。

許可内容:ゼロ以上<option>又は<optgroup>要素。 1

それが最初の行にpreventDefault()への呼び出しを持っているので、あなたのjavascriptのクリックハンドラは、すべてのクリック(左と右ボタンの両方)のデフォルトの動作を停止しています。

function rtclickcheck(keyp){ 
    keyp.preventDefault(); 

すべてのマウスクリックで使用する場合を除いて、これは問題ありません。 onmousedownの代わりにoncontextmenuイベントハンドラを使用できます。したがって、この行:IE 8またはそれ以前のバージョンをサポートする必要がない場合は、addEventListener()持つこの技術は、よりevent delegationのようである、使用することができ

window.oncontextmenu = rtclickcheck;  

document.onmousedown = rtclickcheck; 

に変更することができますパターン:

window.addEventListener('contextmenu', rtclickcheck, false); 

this jsFiddleで確認できます。

関連する問題