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); 
    }); 
});