Change dropdown value based on Text Input

问题:

I would like to change a select option based on the text input value.

For example, when typing mydomain.com, this should happen:

• I type "mydomain"
• I type "." (dot)
• It stops adding values to text input
• It searches for a select option with ".com" and select it

I have edited this old question of mine to make it clearer. This is a screenshot I had of that time, it might help illustrate the issue:

Code example:

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

<select id="extension" name="extension">
    <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>

回答1:

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.

回答2:

I have 2 ideas how to do

• Cut the ending ".tld" by parsing string.
• Ban "." in input field. Button "search" will trigger the function that detects disallowed characters. If it finds any, it gets error. If everything goes fine, the result on second picture will be shown to you. More about this problem http://www.regular-expressions.info/ , or similar stack question Check for invalid characters in a php string