jQuery的選擇菜單和文本輸入搜索

Question

我創建的圖像搜索功能，這將在網站的主頁中使用，鏈接到網站的照片庫。

我已經創建了所有的圖片廊相冊中選擇菜單（這是顯示圖像孩子的列表頁）作爲選項，並有一個文本輸入和搜索按鈕。

<select name="photographySearch" id="photographySearch"> 
    <option value="">Select category</option> 
    <option value="football.aspx">Football</option> 
    <option value="basketball.aspx">Basketball</option> 
    <option value="hockey.aspx">Hockey</option> 
</select> 

<input type="text" id="photographySearchKeyword" 
    onfocus="if(this.value==this.defaultValue) this.value='';" 
    onblur="if(this.value=='') this.value='Enter keyword';" 
    value="Enter keyword" /> 

<input type="button" 
    id="photographySearchButton" 
    name="searchbutton" 
    value="Search" />​ 

我需要一個腳本，將做到以下幾點：

1. 如果用戶點擊搜索按鈕而不選擇 菜單中選擇任何選項或輸入任何關鍵字到文本輸入時，位置將 更改爲「/photography-search.aspx」頁面（默認顯示攝影庫中的所有圖像），而不顯示默認的「輸入關鍵字」作爲搜索結果

2. 如果用戶點擊搜索按鈕不脫離選擇 菜單中選擇任何選項，輸入關鍵字/ s的進入文本輸入，該位置將 變化到「/photography-search.aspx?search=‘+ $（’ #photographySearchKeyword '）ATTR（' 值'）;」包括輸入到文本輸入中的值

3. 如果用戶在沒有從選擇菜單中選擇任何選項或在文本輸入中輸入任何關鍵字的情況下單擊搜索按鈕，位置將更改爲「/photography-search.aspx 「頁面（默認情況下會顯示在攝影庫中的所有圖片）

4. 如果用戶點擊搜索按鈕，並選擇從選擇菜單 任何選項，並且不輸入任何關鍵字到文本輸入，位置將 更改爲所選選項的值，例如「/football.aspx」頁面，而不是顯示默認的「請輸入關鍵詞」如果用戶點擊搜索按鈕，並選擇從選擇菜單 任何選項作爲搜索結果

5. ，並輸入任意關鍵字/秒到文本輸入，該位置將 改變到所選擇的選項例如的值「 'ATTR /football.aspx?search=」 + $（' ＃photographySearchKeyword）（ '值'）;」包括輸入到文本輸入頁面

值到目前爲止，我只設法創建選項2：

$('#photographySearchButton').click(function() { 
    location.href = '/photography-search.aspx?search=' + 
        $('#photographySearchKeyword').attr('value'); 
}); 

http://jsfiddle.net/zjs8n/

任何幫助將不勝感激。

Answer 1

測試的例子here

$(document).ready(function() { 
    $('#photographySearchButton').click(function() { 
    var category = $('#photographySearch :selected').val(); 
    var keyword = $('#photographySearchKeyword').val(); 

    var page = '/photography-search.aspx'; 
    var query = ''; 

    if (category.length > 0) 
     page = category; 
    if (keyword.length > 0 && keyword != 'Enter keyword') 
     query = '?search=' + keyword; 

    alert(page+query); 
    }); 
});