2017-03-12 13 views
0

CSSでドロップダウンメニューを作成し、Djangoで選択したオプションの値を処理しようとしています。どうすればこれを達成できますか?テキストボックスHTMLでコードを試してみましたが、request.get関数を使ってデータを取得することができましたが、CSSのドロップダウンメニューを使用してこれをどのように達成できますか?DjangoのCSSドロップダウンメニューオプション名を取得

サンプルCSS(W3学校):

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>MyPage</title> 
</head> 
<body> 
<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn { 
    background-color: #4CAF50; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

.dropdown:hover .dropbtn { 
    background-color: #3e8e41; 
} 
</style> 
</head> 
<body> 

<h2>Hoverable Dropdown</h2> 
<p>Move the mouse over the button to open the dropdown menu.</p> 

<div class="dropdown"> 
    <button class="dropbtn">Dropdown</button> 
    <div class="dropdown-content"> 
    <a href="someurlwhichhasaviewattached" name="Linke">XXX</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    </div> 
</div> 

</body> 



</body> 
</html> 

ユーザーがXXXを選択した場合、どのように私は、バックグラウンドでそれを取得することができますか?

+0

あなたがリンクにJSのクリックハンドラをアタッチし、リンクの値に何でもするAJAX要求を行うことができます。このよう 。 –

+0

私はアヤックスについて考えていません – user3930213

+0

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started –

答えて

0

「XXX」を選択する場合は、選択ボックスを使用する必要があります。

.styled select { 
 
    background: transparent; 
 
    width: 150px; 
 
    font-size: 16px; 
 
    border: 1px solid #ccc; 
 
    height: 34px; 
 
} 
 

 
.styled{ 
 
    margin: 50px; 
 
    width: 120px; 
 
    height: 34px; 
 
    border: 1px solid #111; 
 
    border-radius: 3px; 
 
    overflow: hidden; 
 
    background:#ddd; 
 
}
<div class="styled"> 
 
    <select> 
 
     <option selected>Dropdown</option> 
 
     <option>XXX</option> 
 
     <option>Link 2</option> 
 
     <option>Link 3</option> 
 
    </select> 
 
</div>

+0

それでは、Djangoでその価値をどうやって得るのですか?私はhref = "xyz"を追加することができ、それに関連するビューは起動されます。要求オブジェクトを使用してどのように価値を得ることができますか? – user3930213

関連する問題