javascript - 将输入文本与选项值匹配并自动选择它

Question

我有一个输入字段和一个选择标签，如下所示:

<input type="text" id="domain"/>
   <select>
     <option value=".com">.com</option>
     <option value=".net">.net</option>
     <option value=".org">.org</option>
   </select>
<input type="submit" value="check" />

用户输入一个域名，从列表中选择一个 tld(域扩展)，然后检查域。

例如，如果用户在输入字段中插入 (mynewdomain.com)，它将不起作用。用户必须单独在输入中插入域名并从列表中选择一个扩展名，而不是将其放入输入字段，否则会发生错误。

我将隐藏选择标签，所以我需要在点击复选按钮时执行以下操作:

1. 使输入匹配并在用户插入域名时通过选择选项的值调用扩展。例如，如果用户插入 (mynewdomain.com)，则它应该根据其值 ".com" 从选项列表中自动选择该扩展名。
2. 从输入字段中删除用户添加的扩展名(.com、.net 等)。

然后发送到服务器...

已更新 JSFiddle example解释我正在尝试做什么。

如何使用 JavaScript 或 jQuery 实现此目的？如果有人能帮我解答，我将不胜感激。

注意:PHP 已加密，我只能使用 JavaScript 和 jQuery 解决。

Answer 1

这应该很好用

$(document).ready(function(){
    var tldArray = new Array();
  
    // Store each option value into tldArray
    $("select.hide > option").each(function(){
        tldArray.push($(this).val());
    });
    
    $("#check").click(function(){
        var s = $("#domain").val().split('.');
        var choosenTld = '.'+s[s.length-1].toLowerCase(); // Get last value of the array, the TLD
        for (index = 0;index < tldArray.length;++index) {
            if (choosenTld.indexOf(tldArray[index]) >= 0 && tldArray[index].length == choosenTld.length) {
                $('select.hide').val(tldArray[index]);
                var newValue = $("#domain").val().toLowerCase().replace(tldArray[index],'');
                $("#domain").val(newValue);
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="domain" value="mynewdomain.com" />
<select class="hide">
  <option value=".com">.com</option>
  <option value=".net">.net</option>
  <option value=".org">.org</option>
  <option value=".co">.co</option>
</select>
<input id="check" type="submit" value="check" />