顯示基於2個下拉選項的特定文本輸出

我想顯示兩個文本字符串，具體取決於用戶從兩個下拉列表中選擇。顯示基於2個下拉選項的特定文本輸出

因此有兩個下拉選項： enter image description here

對於每個月的選擇，我想有一個相應的值。因此，對於1月份的選項，價值將是「1月名稱」。對於每個顏色選項，還有一個對應的值。所以綠色選項的值是「綠色名稱」。

一旦用戶選擇兩個選項（月和顏色），我希望輸出顯示一個文本與兩個值的連接。

因此，舉例來說，如果我選擇一月和綠色，輸出將是：

enter image description here

如果我更改月份到別的東西，名稱將相應更新。

我把一些html/css代碼放在一起作爲開始http://jsfiddle.net/baumdexterous/ys3GS/。我將不勝感激，如果有人可以闡明我如何使用jQuery來實現這個任務！另外 - 我怎樣才能使文本輸出淡入？非常感謝！！！

<body> 

    <h2>Find your Animal Name</h2> 

<p>Select your birth month and your favorite color and find your animal name.</p> 

<form> 
     <select id="month"> 
      <option value="">- birth month -</option> 
      <option value="January">January</option> 
      <option value="February">February</option> 
      <option value="March">March</option> 
      <option value="April">April</option> 
      <option value="May">May</option> 
      <option value="June">June</option> 
      <option value="July">July</option> 
      <option value="August">August</option> 
      <option value="September">September</option> 
      <option value="October">October</option> 
      <option value="November">November</option> 
      <option value="December">December</option> 
     </select> 
     <label class="January" for="January">January Name</label> 
     <label class="February" for="February">February Name</label> 
     <label class="March" for="March">March Name</label> 
     <label class="April" for="April">April Name</label>   
     <label class="May" for="May">May Name</label> 
     <label class="June" for="June">June Name</label>   
     <label class="July" for="July">July Name</label> 
     <label class="August" for="August">August Name</label> 
     <label class="September" for="September">September Name</label> 
     <label class="October" for="October">October Name</label> 
     <label class="November" for="November">November Name</label> 
     <label class="December" for="December">December Name</label> 


     <select id="color"> 
      <option value="">- favorite color -</option> 
      <option value="Green">Green</option> 
      <option value="Blue">Blue</option> 
      <option value="Red">Red</option> 
     </select> 
     <label class="Green" for="Green">Green Name</label> 
     <label class="Blue" for="Blue">Blue Name</label> 
     <label class="Red" for="Red">Red Name</label> 
    </form> 

    <!-- <p class="output">YOUR ANIMAL NAME IS JANUARY NAME GREEN NAME</p> --> 

</body>

順便說一句 - 我也想樣式選擇領域...所以它更有意義，寫這些的列表項（鋰，UL）？

來源

2013-03-26 Ori

什麼是你的問題？ – Ryan 2013-03-26 18:44:46

如果你想風格的表單字段，請嘗試http://Uniformjs.com/ – Barmar 2013-03-26 18:49:28

$("#month, #color").change(function() { 
    var month = $("#month").val(); 
    var color = $("#color").val(); 
    var content = ''; 
    if (month && color) { 
     var monthlabel = $("label[for="+month+"]").text(); 
     var colorlabel = $("label[for="+color+"]").text(); 
     content = 'Your animal name is ' + monthlabel + ' ' + colorlabel; 
    } 
    $("#output").text(content).fadeIn(); 
});

FIDDLE

來源

2013-03-26 18:47:32 Barmar

嘿那裏 - 對不起，我打算髮布的代碼是這樣的：jsfiddle.net/baumdexterous/ys3GS – Ori 2013-03-26 18:54:27

我更新你的小提琴，看一看。 – Barmar 2013-03-26 19:03:33

非常感謝！這正是我想要解決的問題。非常感謝你@Barmar！非常感謝您的幫助。 – Ori 2013-03-26 19:09:54

顯示基於2個下拉選項的特定文本輸出

回答

相關問題