ドロップダウンメニューが正しく表示されない

私は単純なドロップダウンメニューを作成し、 'ok'と 'cancel buttons'を追加しようとしています。私はコードを持っている：私はボタンをクリックすることができるようにしたいドロップダウンメニューが正しく表示されない

$("#dialog").hide(); 
 
    $("#target").click(function() { 
 
    $("#dialog").show(); 
 
    $("#dialog").dialog(); 
 
    });

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div id="dialog" title="Basic dialog"> 
 
     <select> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </div> 
 
    <input type="button" id="target" value="click" /> 
 
</body> 
 

 
</html>

を、そして、それはオプションのいずれかを選択する能力をドロップダウンメニューでウィンドウを開く必要があり、 OKボタンとキャンセルボタンがあります。

しかし、これは同時にボタンとメニューを表示しているようです（ポップアップは表示されません）。また、okを追加する方法やボタンをキャンセルする方法もわかりません。

私はHTMLコードでonclickメカニズムを使ってみましたが、実際にはJavaScript関数のintを使ってみましたが、実際には役に立ちません。

出典

2016-10-31 erere

あなたは実際に使用していると思われるjQueryライブラリを含めましたか？ – MakG

@ererer jsfiddleを追加できますか？ – Kwakwak

あなたの '' – Robiseb

ここではdialog documentationです。
は、カスタム独自の.dialog

$("#dialog").hide(); 
 
    $("#target").click(function() { 
 
    $("#dialog").show(); 
 
    $("#dialog").dialog(); 
 
    }); 
 

 
    $('#formBrands').submit(function(){ 
 
    $("#dialog").dialog('close'); 
 
    });

.button { 
 
    background-color: #52B3D9; 
 
    color: white; 
 
}


 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <div id="dialog" title="Basic dialog"> 
 
     <form id="formBrands" method="post" action="yourPHP.php"> 
 
     <select name="brands"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
     <input type="submit" value="OK" /> 
 
     </form> 
 
    </div> 
 
    <input type="button" id="target" value="click" />

出典

2016-10-31 19:52:19 Robiseb

こんにちは私は元のCSSボタンを削除して申し訳ありませんが、私はOKボタンと閉じるボタンでポップアップウィンドウを開くクリックボタンを持っていただけです – erere

私はOKとキャンセルボタンが必要ですOKを押すと私は

へのすべてのメソッドとオプション私はあなたのコードに3つの事を追加し、それが私の作品があり、見てみましょう。

jQueryライブラリ。
jQuery UIライブラリ。
$(document).ready()にjavascriptコードをラップします。ここで

コードです：

HTML：

<div id="dialog" title="Basic dialog"> 
    <select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </select> 
</div> 
<input type="button" id="target" value="click" />

Javascriptを：

$(document).ready(function() { 
    $("#dialog").hide(); 
    $("#target").click(function() { 
    $("#dialog").show(); 
    $("#dialog").dialog(); 
    }); 
});

あなたはjsFiddleに実行されているバージョンを確認することができます。

出典

2016-10-31 20:01:31 AnhTriet

閉じるボタンの名前を「キャンセル」に変更する方法はありますか？ – erere

はい、この[リンク]（http://stackoverflow.com/questions/7909157/replacing-the-close-icon-for-a-jqueryui-dialog-box）をご確認ください。 – AnhTriet

ドロップダウンメニューが正しく表示されない

答えて

関連する問題