多选形式?

时间:2013-12-12 02:10:57

标签: javascript php jquery ajax

我正在尝试使用两行相同的表自动填充表单中的两个下拉字段。 迷上JavaScript

<tr>
    <td width="100" valign="top" style="margin-top:0px"><label>Card</label></td>
    <td><select name="cardid" >
            <option value="">Select</option>
            <option value="1000">1000</option>
            <option value="1001">1001</option>
            <option value="1002">1002</option>
            <option value="1003">1003</option>
            <option value="1004">1004</option>
        </select>
    </td> 
</tr>

我想自动填充选择1000,1001,1002 for Center USA 1003 1004 for Center UK

<tr>      
    <td><label>Center</label></td>
    <td><select name="center">
            <option value="USA">USA</option>
            <option value="UK">UK</option>
        </select>
    </td>       
</tr>

任何帮助pl

1 个答案:

答案 0 :(得分:0)

试试这个:

HTML:

<tr>
    <td width="100" valign="top" style="margin-top:0px"><label>Card</label></td>
    <td><select id="cardid" name="cardid" >
        <option value="">Select</option>
        <option value="1000">1000</option>
        <option value="1001">1001</option>
        <option value="1002">1002</option>
        <option value="1003">1003</option>
        <option value="1004">1004</option></select></td> 
</tr>
<tr>
    <td><label>Center</label> </td>
    <td><select id="center" name="center">
    <option value="USA ">USA </option>
    <option value="UK "> UK </option>
    </select> </td>       
</tr>

Javascript:

var usa = "1000,1001,1002";
var uk = "1003,1004";
$(function(){
    $('#cardid').change(function(){
        if(usa.indexOf($(this).val()) != -1){
            // found usa
            $('#center').val($('#center > option:first-child').val());
        }
        else if(uk.indexOf($(this).val()) != -1){
            //found uk
            $('#center').val($('#center > option:last-child').val());
        }
    });
});

这是demo