jQuery - 根据输入链接中粘贴的链接选择一个选项答案

【问题标题】：jQuery - Select a option based on what link has been paste in input linkjQuery - 根据输入链接中粘贴的链接选择一个选项
【发布时间】：2017-09-18 15:10:27
【问题描述】：

在我的表单中，我有一个 input tag 和一个 select tag。我的input tag 将始终粘贴一个链接，而我的select tag 将包含用户添加到其帐户的所有域。

我的表格：

<form action="/action">
  # Link will be paste here
  <input type="text" name="link" id="link">

  # User will select one of their domains
  <select id="user-domains">
    <option value="1">google.com</option>
    <option value="2">facebook.com</option>
    <option value="3">stackoverflow.com</option>
    <option value="4">github.com</option>
  </select>

  <input type="submit" value="Submit">
</form>

我想要实现的是，当用户将链接粘贴到 input#link 时，如果链接包含我的 select options 文本之一，则将选择 option。

例如：

1) 将选择以 facebook.com 作为文本的用户粘贴 inn https://www.facebook.com/officialstackoverflow/ & option。

2) 用户粘贴 inn https://www.w3schools.com/html/html_forms.asp & 由于我的 options 中没有一个有 www.w3schools.com 作为其文本，因此不会选择任何内容。

【问题讨论】：

标签： javascript jquery html forms select

【解决方案1】：

下面的小功能应该完全符合您的要求。

function change () {
    input = $('#link').val();

    // Loop through all the options
    $('#user-domains option').each(function(){

        // Check if the input string contains the text from the current option
        if(input.indexOf($(this).html()) >=0){
            // Set the correct value to the select box
            $('#user-domains').val($(this).val());
        }
    });
}

用onChange事件如下

<input onchange="change()" type="text" name="link" id="link">

查看JSFiddle

编辑

我还为onPaste 事件创建了一个JSfiddle。因为onPaste 事件在输入值更新之前触发，所以我必须使用setTimeout 来确保更改函数在输入更改后运行。

<input onpaste="setTimeout(function(){change()},0)" type="text" name="link" id="link">

为 onpaste 事件更新了JSFiddle。

【讨论】：

【解决方案2】：

测试一下：

if (str_link.toLowerCase().indexOf("facebook") >= 0) {
// select facebook option
// ... else if(other options) ...
// ...

【讨论】：

【解决方案3】：

This is how you can do it in javascript if jQuery is not required, for somebody who is just learning.

function handleDropDown(data) {
            var elem = document.getElementById('user-domains');
            var optionList = elem.options;

            for (var i = 0; i < optionList.length; i++) {
                var currentOption = optionList[i];
                if (data.indexOf(currentOption.textContent) >=0) {
                    elem.selectedIndex = currentOption.index;
                    break;//Exit the loop ASAP
                }
                
            }
           
        }

<form action="/action">
  # Link will be paste here
  <input type="text" name="link" id="link" onchange="handleDropDown(this.value)">

  # User will select one of their domains
  <select id="user-domains">
    <option value="1">google.com</option>
    <option value="2">facebook.com</option>
    <option value="3">stackoverflow.com</option>
    <option value="4">github.com</option>
  </select>

  <input type="submit" value="Submit">
</form>

【讨论】：