如何根据选定的值设置表单项的值?

时间:2012-03-21 09:12:16

标签: javascript html

我有两个相关的表单字段,国家/地区代码和国家/地区(此处字段“Land”被假定为国家/地区代码。) enter image description here

现在我希望在选择国家/地区时填充国家/地区代码的值,反之亦然,在输入国家/地区代码时选择该国家/地区。国家/地区选项的值是国家/地区代码。

我尝试了类似下面的内容,根据所选字段正确填充国家/地区代码,但我现在不知道如何反过来,如何在国家/地区代码的选项中设置所选元素输入

 <div class="fl20">Land:</div>
        <div class="fl40"><input type="text" size="2" id="landkod1" "value="<%if (ansokanInfo.getUppfinnareList().contains(editPerson) || ansokanInfo.getSokandeList().contains(editPerson)  ){out.write(editPerson.getLandKod());} %>" name="<%= PandoraFieldConstants.FIELD_LANDKOD %>">&nbsp;


        <select name="<%= PandoraFieldConstants.FIELD_LAND %>" onchange=document.getElementById('landkod1').value=this.value>
<% 
for(Land land: pc.getLander()) {
%>
<option value="<%=land.getLandKod()%>"><%=land.getLandNamn()%></option>
<% 
}
%>

        </select>

你能说出应该怎么做吗?

谢谢

1 个答案:

答案 0 :(得分:1)

由于您已将其标记为javascript和html,因此我假设您需要基于它的解决方案。我也会假设你可以使用jquery,因为坦率地说,它对我来说更容易。

$('#landkod1').change(function(){
    //assuming your land combo has an id - "landSelect"
    var selectElement = $('#landSelect'),
        me = $(this), val = me.val().trim();
    selectElement.find('option').each(function(i, item){
        var self = $(item), selfVal = self.val();
        if(selfVal === val){
            selectElement.val(selfVal);
            return false;//break out of the each loop
        }
    });
});

Check the example fiddle here