jQuery 基于所选选项的搜索脚本

Question

我尝试使用基于 selected 选项的简单搜索方法。

场景：我有一个搜索表单，我需要在其中输入名称。然后需要 select 我想搜索的地方并点击提交。它应该以以下格式打开一个新的 window 和 URL - URL - 基于 selected 选项 + 来自搜索输入的字符串。如果我将所有内容都放在表单值中但我需要在脚本中设置实际值而不是 html 值。

我的HTML:

<form>
<input id="search" type="search" placeholder="placeholder">
 <select name="selection" id="selection">
  <option class="level_2" value="1">website1.com</option>
  <option class="level_2" value="2">website2.com</option>
  <option class="level_2" value="3">website3.com</option>
</select>
<button id="submit" type="submit">vyhledat</button>
</form>

<script>  
jQuery(document).ready(function( $ ) {
    $('#submit').on('click', function(){
        var searchitem = document.getElementById("search");
        var selecteditem = document.getElementById("selection");
        var selectionitem;
         switch($(selecteditem).val()) {
            case "1": selectionitem = "https://www.wikitree.com/genealogy/";
                 break;
            case "2": selectionitem = "https://www.wikitree.com/genealogy1/";
                 break;
            case "3": selectionitem = "https://www.wikitree.com/genealogy2/";
                 break;
            }
        var url = selectionitem.value + searchitem.value;
        window.open(url,"");
        });
    });
</script>

当我使用“selectionitem”的警报时，它 returns 正确的值，但值没有转移到“var url = seletionitem.value”。

感谢您的帮助

Answer 1

只需使用 selectionitem 而不是 selectionitem.value

jQuery 基于所选选项的搜索脚本

jQuery search script based on selected option

javascript

forms

search

jquery

html-select