Question

我正在尝试制作一个下拉列表，从3个不同的下拉列表中填充搜索栏。我试图让它在每次选择后更新搜索栏并保留之前的选择，所以它会读取175 / 55/17在搜索栏中。是的我是一个完整的菜鸟，请帮忙！这是我到目前为止所做的：

这是我的更新代码，仍未填充网站上的搜索字段或http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_regexp_i

我做错了什么？

    <!DOCTYPE html> 
<html> 
<head> 
<script language= "javascript" stype="text/javascript" type:"text/javascript">
$(document).ready(function() { $('select').change(function () { 
$('#_shop_itemsearch_query').val($('#Width').val() + '/' + $('#height').val() + '/' +
$('#size').val()); }); }); </script> 
</head>
<body>
 <input type="text" name="_shop_itemsearch_query" id="_shop_itemsearch_query" class="v2_shop_form_input"> 

<form action=""> <select name="Width" id="width"> 
<option value="175"selected>175</option> 
<option value="185">185</option> 
<option value="195">195</option> 
<option value="205">205</option> 
<option value="215">215</option> 
<option value="225">225</option> 
<option value="235">235</option> 
<option value="245">245</option> 
<option value="255">255</option> 
<option value="265">265</option> 
<option value="275">275</option> 
<option value="285">285</option> 
<option value="295">295</option> 
<option value="305">305</option> 
<option value="315">315</option> 
<option value="325">325</option> 
<option value="335">335</option> 
<option value="345">345</option> 
</select> 
<form action=""> 
<select name="Height" id="height"> 
<option value="20"selected>20</option> 
<option value="25">25</option> 
<option value="30">30</option> 
<option value="35">35</option> 
<option value="40">40</option> 
<option value="45">45</option> 
<option value="50">50</option> 
<option value="55">55</option> 
<option value="60">60</option> 
<option value="65">65</option> 
<option value="70">70</option> 
<option value="75">75</option> 
<option value="80">80</option> 
<option value="85">85</option> 
</select> 
<form action=""> 
<select name="Size" id="size"> 
<option value="15"selected>15</option> 
<option value="16">16</option> 
<option value="17">17</option> 
<option value="18">18</option> 
<option value="19">19</option> 
<option value="20">20</option> 
<option value="21">21</option> 
<option value="22">22</option> 
<option value="24">24</option> 
<option value="25">25</option> 
</select> 
</body>
</html>

Answer 1

$(document).ready(function() {
    $('select').change(function () {
        $('#_shop_itemsearch_query').val($('#Width').val() + '/' + $('#height').val() + '/' + $('#size').val());
    });
});

<强> jsFiddle example

Answer 2

$('select').change(function(){
    var str = "";

    $('select').each(function(index){
        str += $(this).val();
        if(index != $('select').length - 1)str += '/';
    })

    $('#_shop_itemsearch_query').val(str)
})

未经测试但应该有效。

3下拉列表以填充搜索栏

2 个答案: