jquery select option

我對jQuery相當陌生，想知道如何在下拉菜單中選擇一個選項。jquery select option

更具體地說：您可以在下拉菜單中選擇一種顏色，並且當您單擊該按鈕時，背景顏色會更改爲該顏色。

提前致謝！

這裏的HTML：

<div id="form-box"> 
     <h1>Funky Background Color Changer</h1> 
     <p>1. Choose a funky background color: 
      <select name="bgColor" id=""> 
       <option value="$juicy-cyan">Juicy Cyan</option> 
       <option value="$purdy-purple">Purdy Purple</option> 
      </select> 
     </p> 
     <p>2. That's it actually! Just click the button.</p><br> 
     <button class="funk">Let's Funk!</button> 
    </div>

來源

2016-03-02 Jordan Heuten

上例如選擇列表的值添加一個ID您h1和你的顏色（十六進制值），然後設置按鈕，單擊時的brackground：

HTML

<div id="form-box"> 
     <h1 id="h1_id">Funky Background Color Changer</h1> 
     <p>1. Choose a funky background color: 
      <select name="bgColor" id="bgColor_id"> 
       <option value="#ff0000">Juicy Cyan</option> 
       <option value="#0066ff">Purdy Purple</option> 
      </select> 
     </p> 
     <p>2. That's it actually! Just click the button.</p><br> 
     <button class="funk" id="submitButton">Let's Funk!</button> 
    </div>

JQuery的

$('#submitButton').on('click', function() { 
    var color = $("#bgColor_id").val(); 
    $("#h1_id").css('background-color', color); 
});

來源

2016-03-02 16:10:59 danielpm

我可以使用SASS變量而不是顏色十六進制嗎？ –

@JordanHeuten從來沒有與SASS合作，所以不能幫助你。但嘗試用sass變量替換十六進制值並查看結果。 – danielpm

背景顏色似乎並沒有改變壽 –

首先，你應該給選擇一個ID屬性是jQuery的可能訪問。例如，您可以使用與名稱bgColor相同的名稱。比代碼如下：

$('#bgColor').val()

來源

2016-03-02 16:01:44

jquery select option

回答

相關問題