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 ），它将无法工作。用户必须在输入中单独插入域名，并从列表中选择一个扩展名而不将其放在输入字段中，否则将发生错误。

我将隐藏选择标记，因此我需要在点击检查按钮时执行以下操作：

当用户插入域名时，使输入匹配并从select选项中调用其值。例如，如果用户插入（ mynewdomain.com ），则它应该从选项列表中按值".com"自动选择该扩展名。
从用户添加的输入字段（ .com，.net等）中删除扩展名。

然后发送到服务器...

更新JSFiddle example解释了我尝试做的事情。

如何使用JavaScript或jQuery实现这一目标？如果有人能帮我解答，我会非常感激。

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

Answer 1

没有jQuery：

您可以收听元素的input事件，匹配跟随<{em> .字符的字符，然后设置兄弟select元素的值：

Updated Example

document.getElementById('domain').addEventListener('input', function (e) { var match = e.target.value.match(/\.(?=[A-Za-z])[A-Za-z]{2,3}/g); e.target.nextElementSibling.value = match ? match[0].toLowerCase() : ''; });

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

如果没有正则表达式，您还可以使用以下内容：

Updated Example

document.getElementById('domain').addEventListener('input', function (e) { var match = e.target.value.split('.'); e.target.nextElementSibling.value = match ? '.' + match[match.length - 1].toLowerCase() : ''; });

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

Answer 2

$("#domain").change(function(){
    domainstr = $("#domain").text();
    lastindex = domainstr.lastIndexOf(".");
    if(lastindex > 0 ){
        str = domainstr.substring(lastindex);
         $("select").val(str);   
    }
});

Answer 3

这应该这样做：

    $('#domain').bind("keyup",function(event){

      var tld = this.value.split('.')[1];

      if(tld && $('select option[value="'+tld+'"]').length){
        $('select').val(tld);
        this.value = this.value.split('.')[0];
        $('form').submit();
      }


    });

Answer 4

像这样的东西

$(document).on("click", "#newSubmit", function(){
    var input = $("#newDomain").val();
    var stringLength = input.length;
    var lastFourLetters = input.substr(stringLength - 4);
    if(lastFourLetters == '.com' || lastFourLetters =='.net' || lastFourLetters == '.org'){
        // Changes the select value
        $("#newSelect option[value='" + lastFourLetters + "']").prop("selected", "selected");
        var newString = $("#newDomain").val().substr(0, stringLength -4 );
        // Takes out the address extension
        $("#newDomain").val(newString);
    } 
});

JSFiddle

Answer 5

这应该很好

$(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" />

Answer 6

另一种简单的方法是使用indexOf来查看存在的扩展名，然后将其删除。请注意，您需要进行更多错误处理，以确保您尝试执行的操作符合要求：

<强> HTML

<!DOCTYPE Html />
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="text" id="domain" />
            <select id="domainExtension">
                <option value=".com">.com</option>
                <option value=".net">.net</option>
                <option value=".org">.org</option>
            </select>
        <input type="submit" value="check" id="btnCheck"/>
        <script type="text/javascript" src="theJS.js"></script>
    </body>
</html>

<强> JAVASCRIPT

var btnCheck = document.getElementById("btnCheck");
var elDomain = document.getElementById("domainExtension");
var inputDomain = document.getElementById("domain");
btnCheck.onclick = function () {
    var theExtension = getDomainExtension(inputDomain.value);

    if (theExtension != false) {
        elDomain.value = theExtension;
        inputDomain.value = inputDomain.value.toString().replace(theExtension, "");
    }
    else {
        alert("Extension not valud");
    }

}

function getDomainExtension(url) {

    if (url.indexOf(".com") > -1) {
        return ".com";
    }
    else if (url.indexOf(".org") > -1) {
        return ".org";
    }
    else if (url.indexOf(".net") > -1) {
        return ".net";
    }
    else {
        return false;
    }
}

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

6 个答案:

没有jQuery：