我有一个下拉菜单,其中包含 3 个类别。我希望这样当用户选择一个类别时,会出现该类别的正确数量的搜索框。然后,我希望将输入到搜索框中的文本保存为 URL 中的变量。这是我得到的
HTML:
<form class="list" action="table.php" method="get">
<table>
<tbody>
<tr class="name">
<td>First Name:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="name">
<td>Last Name:</td>
<td><input type="text" class="searchBox" name="q2" /></td>
</tr>
<tr class="owner">
<td>Owner:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="dlp">
<td>Text 1:</td>
<td><input type="text" class="searchBox" name="q1" /></td>
</tr>
<tr class="dlp">
<td>Text 2:</td>
<td><input type="text" class="searchBox" name="q2" /></td>
</tr>
<tr class="dlp">
<td>Text 3:</td>
<td><input type="text" class="searchBox" name="q3" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="SEARCH" /></td>
</tr>
</tbody>
</table>
<br>
<select id="options">
<option value="name">Option 1</option>
<option value="owner">Option 2</option>
<option value="dlp">Option 3</option>
</select>
</form>
JS:
$('#options').change(function() {
if ($(this).val() == 'name') {
$('.name').show();
$('.owner').hide();
$('.dlp').hide();
} else if ($(this).val() == 'owner') {
$('.name').hide();
$('.owner').show();
$('.dlp').hide();
} else if ($(this).val() == 'dlp') {
$('.name').hide();
$('.owner').hide();
$('.dlp').show();
}
});
$(function(){
$('form').bind('change', function () {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
这显示了正确的搜索框数量,但它不会将搜索框中的文本保存在变量中。这似乎也不是一个好方法(如果您知道正确的方法,请为我指出正确的方向。这是我能做的唯一可行的事情)。在此之前,我每个类别有 1 个搜索框,所以我的 JS 代码是这样的
(function($) {
$(function(){
$('form').bind('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
})(jQuery);
但是,我不知道如何让它适用于多个搜索框。我只想要显示为通过 URL 传递的搜索框的变量(同样,所以这可能不是正确的方法?)。
谁能帮帮我吗?谢谢
最佳答案
您可以尝试以下方法。
事件处理程序绑定(bind)到表单的 submit
事件。在其中,我们获取表单中存在的所有具有 type="text"
的输入元素的列表,并仅选取使用 filter
方法可见的字段。然后我们遍历元素列表并形成dataString。该数据字符串的格式为 q=a&q1=b
并将附加到 URL 中。 encodeURIComponent
用于对 dataString 进行编码。
$(function(){
var dataString = "";
var url="sample.htm";
var count=0;
$('form').bind('submit', function () {
$('form input[type="text"]').filter(':visible').each(function(){
if(count === 0)
dataString += this.name + "=" + $(this).val();
else
dataString += '&' + this.name + "=" + $(this).val();
count++;
});
//console.log(dataString);
dataString += "&t="+$("#options").val(); //appending the value of the select box
if (url) {
window.location = url + "?" + encodeURIComponent(dataString); //added for the URL encode
}
return false;
});
});
关于javascript - 使用下拉菜单添加/删除搜索框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18493161/