根据文本输入更改下拉列表值 [英] Change dropdown value based on Text Input

问题描述

有选项> 用于扩展名，文本输入应专门用于域名NAME

There's <option> for extensions, and text input should be exclusively for domain NAME

如果域名以 .net.br 结尾，则可以使用大约75个扩展名，例如，它将选择< option value =。net.br> .net.br< / option>

There are about 75 extensions available, if domain name ends in .net.br for example, it would select <option value=".net.br">.net.br</option>

如问题标题所示，自动从域名中删除扩展名，因此输出将只是域名，而没有.com .org .net等。

As stated in the question title, remove the extension names from the domain name automatically, so the output would be only the domain name, without .com .org .net and others

            <input type="text" autocomplete="off" id="Search" name="domain">

                <div id="select_extensao">
                <select id="extensao" name="extensao">
                    <option value=".com">.com</option>
                    <option value=".com.br">.com.br</option>
                    <option value=".net">.net</option>
                    <option value=".org">.org</option>
                    <option value=".info">.info</option>
                    <option value=".biz">.biz</option>
                    <option value=".tv">.tv</option>
                    <option value=".name">.name</option>
                    <option value=".ws">.ws</option>
                    <option value=".cc">.cc</option>
                    <option value=".blog.br">.blog.br</option>
                    <option value=".flog.br">.flog.br</option>
                    <option value=".vlog.br">.vlog.br</option>
                    <option value=".wiki.br">.wiki.br</option>
                    <option value=".adm.br">.adm.br</option>
                    <option value=".adv.br">.adv.br</option>
                    <option value=".agr.br">.agr.br</option>
                    <option value=".am.br">.am.br</option>
                    <option value=".arq.br">.arq.br</option>
                    <option value=".art.br">.art.br</option>
                    <option value=".ato.br">.ato.br</option>
                    <option value=".bio.br">.bio.br</option>
                    <option value=".bmd.br">.bmd.br</option>
                    <option value=".cim.br">.cim.br</option>
                    <option value=".cng.br">.cng.br</option>
                    <option value=".cnt.br">.cnt.br</option>
                    <option value=".coop.br">.coop.br</option>
                    <option value=".ecn.br">.ecn.br</option>
                    <option value=".edu.br">.edu.br</option>
                    <option value=".eng.br">.eng.br</option>
                    <option value=".esp.br">.esp.br</option>
                    <option value=".etc.br">.etc.br</option>
                    <option value=".eti.br">.eti.br</option>
                    <option value=".far.br">.far.br</option>
                    <option value=".fm.br">.fm.br</option>
                    <option value=".fnd.br">.fnd.br</option>
                    <option value=".fot.br">.fot.br</option>
                    <option value=".fst.br">.fst.br</option>
                    <option value=".g12.br">.g12.br</option>
                    <option value=".ggf.br">.ggf.br</option>
                    <option value=".gov.br">.gov.br</option>
                    <option value=".imb.br">.imb.br</option>
                    <option value=".ind.br">.ind.br</option>
                    <option value=".inf.br">.inf.br</option>
                    <option value=".jor.br">.jor.br</option>
                    <option value=".lel.br">.lel.br</option>
                    <option value=".mat.br">.mat.br</option>
                    <option value=".med.br">.med.br</option>
                    <option value=".mil.br">.mil.br</option>
                    <option value=".mus.br">.mus.br</option>
                    <option value=".net.br">.net.br</option>
                    <option value=".nom.br">.nom.br</option>
                    <option value=".not.br">.not.br</option>
                    <option value=".ntr.br">.ntr.br</option>
                    <option value=".odo.br">.odo.br</option>
                    <option value=".org.br">.org.br</option>
                    <option value=".ppg.br">.ppg.br</option>
                    <option value=".pro.br">.pro.br</option>
                    <option value=".psc.br">.psc.br</option>
                    <option value=".psi.br">.psi.br</option>
                    <option value=".qsl.br">.qsl.br</option>
                    <option value=".rec.br">.rec.br</option>
                    <option value=".slg.br">.slg.br</option>
                    <option value=".srv.br">.srv.br</option>
                    <option value=".tmp.br">.tmp.br</option>
                    <option value=".trd.br">.trd.br</option>
                    <option value=".tur.br">.tur.br</option>
                    <option value=".tv.br">.tv.br</option>
                    <option value=".vet.br">.vet.br</option>
                    <option value=".zlg.br">.zlg.br</option>
                    </select>
                        </div>
    <input type="submit" id="Submit" value=".Submit">

推荐答案

您可以使用jQuery作为用户类型...

You could use jQuery to do this as the user types...

$(document).ready(function() {
    $('#search').keyup(function() {
        //The user has typed something. See what they typed and split it.
        var value = $(this).val();
        var components = value.split(".");
        if(components.length == 2) {
            //They have typed a TLD like .com
            if($("#extensao option[value='."+ components[1] + "']").length > 0) {
                //They have typed an available TLD. Select the dropdown and update the box.
                $("#search").val(components[0]);
                $("#extensao").val("." + components[1]);
            }
        } else if (components.length > 2) {
            //They have typed a Second level domain like .blog.br
            if($("#extensao option[value='."+ components[components.length - 2] + "." + components[components.length - 1] + "']").length > 0) {
                //They have typed an available second level domain.
                $("#search").val(components[0]);
                $("#extensao").val("." + components[components.length - 2] + "." + components[components.length - 1]);
            }
        }
    });
});

不知道这是您正在寻找的解决方案（或服务器端）。无论哪种方式，您都需要额外的服务器端验证。

Not sure if this was the kind of solution you were looking for (or something server-side). Either way you would need the additional server-side verification.

这篇关于根据文本输入更改下拉列表值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！