根据输入文本更改SELECT值

Question

<input type="text" id="registersld" />
<select id="registertld">
{foreach key=num item=listtld from=$registertlds}
<option value="{$listtld}"{if $listtld eq $tld} selected="selected"{/if}>{$listtld}</option>
{/foreach}
</select>

这是一个域名查找框，有一个输入文本的域名和一个选择的扩展-我想添加一个javascript，改变选择，如果用户类型的文本框中的扩展，如"mydomain.net"(更改select到。net如果可用)-什么是最好的方法?.change吗?

代码的实际输出:

<input type="text" id="registersld" size="30" value="">
<select id="registertld">
<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>

Answer 1

试试这样的更改处理程序

jQuery(function ($) {
    $('#registersld').on('change', function () {
        var value = this.value,
            parts = this.value.split('.'),
            str, $opt;
        for (var i = 0; i < parts.length; i++) {
            str = '.' + parts.slice(i).join('.');
            $opt = $('#registertld option[value="' + str + '"]');
            if ($opt.length) {
                $opt.prop('selected', true);
                break;
            }
        }
    })
})

演示:小提琴