Multi выбрать по форме?

Question

Я пытаюсь автоматически заполнить два выпадающих поля в форме двумя строками одной таблицы. путаюсь на 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 для центра США 1003 1004 для центров Великобритании

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

Любая помощь пл

Answer 1

Попробуйте это:

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