时间戳

首页 > 解决方案 > 基于所选选项的 jQuery 搜索脚本

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

问题描述

我尝试根据所选选项做简单的搜索方法。

场景：我有一个需要输入姓名的搜索表单。然后需要选择我要搜索的位置并点击提交。它应该打开一个新窗口，其中包含以下格式的 URL - URL - 基于所选选项 + 来自搜索输入的字符串。如果我将所有内容都放在表单值中，它会起作用，但我需要在脚本中设置实际值而不是在 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”的警报时，它会返回正确的值，但值不会转移到“var url =seletionitem.value”。

谢谢您的帮助

标签： javascriptjqueryformssearchhtml-select

解决方案

只需使用selectionitem而不是selectionitem.value

推荐阅读