当我们更改其他选择框的值时，如何更改选择框的选项？

Question

我正在使用jquerymobile 1.4.2.and jquery 1.11.0。

这是我在页面中使用的html代码。

HTML

<select name="im_g0" id="im_g0" class="ayudas" onchange="geoAdmin1=this.value,geoAdmin2=0;geoAdmin2=-1;loadgeo1Adminii1('im_g1','im_g0','g1',0);" data-mini="true" >

<option value="0">select state</option>
<option value="3001">state1</option>
<option value="3002">state2</option>
<option value="3003">state3</option>
</select>

<select name="im_g1" id="im_g1" class="ayudas" <?php if($default<=0){?> disabled="disabled"  <?php }?> data-mini="true">

</select>

SCRIPT

 function loadgeo1Adminii1(objname,objname1,child,selected){

var gobj=AJAX_MM_findObj(objname);
var gobj1=AJAX_MM_findObj(objname1);
if(parseInt(gobj1.value,10) == 15210)
    selected = 15300;

var url=UrlServer+"index.php?im_core=xmlSearch&im_action=getSubGeoSearchAdmin&im_language="+language+"&core="+im_core;
if(gobj1.value>0){
    $('#im_'+child).css({"background-image":"url("+UrlServer+"templates/imagenes/load_blu.gif"+")","background-repeat":"no-repeat", "background-position":"90% 50%"});
    $.post(url,{im_Idgeo: gobj1.value},function(data){
        data.sort(function(a,b){
            var aName = a.Nombre.toLowerCase();
            var bName = b.Nombre.toLowerCase(); 
            return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
        });
        jQuery('#im_g1').html("");
        if(parseInt(gobj1.value,10) >= 30001 && parseInt(gobj1.value,10) <= 30007)

            $("#im_g1").append('<option value="0">'+'select city'+'</option>');
        else 
            $("#im_g1").append('<option value="0">'+'Ciudades'+'</option>');

        jQuery.each(data,function(i,item){
            $("#im_g1").append('<option value="'+item.idgeo+'">'+item.Nombre+'</option>');
        });
        jQuery("#im_g1").val(selected);

        $( "#im_g1" ).selectmenu( "enable" );   
        jQuery("#im_g1").focus();   
        if(selected == 15300){
            jQuery("#im_g1,#obj_g1").css('display','none');

            jQuery("#im_g1").change();

        }
        $('#im_'+child).css({"background-image":"none","background-repeat":"no-repeat", "background-position":"90% 50%"});      
    },'json');  
}else{

    $( "#im_g1" ).selectmenu( "disable" );  
        $( "#im_texto_g2" ).textinput( "disable" );
    jQuery('#im_g1').val(0);
    jQuery('#im_texto_g2').val('');
}


      }

如果我们选择state1，它会加载处于state1的引用。如果我们选择stat2，它的加载城市位于state2。一切正常。

我面临的问题是： 假设我们选择了一个state2，在那个州我们选择了一个city2。 但是如果用户返回并选择了state3（在选择框中），那么它会根据所选状态3正确加载城市但我们只有在点击选择框（下拉列表）时才会知道这一点，因为在第二个选择框中选定的城市，其显示仍然是city2， 我希望这能显示一个“选择城市”。

Answer 1

工作示例：http://jsfiddle.net/Lfms3/

HTML：

<div class='ui-block-a' >
    <div class='ui-body ui-body-a' style='border:0px;'>
        <div class='ui-field-contain'><label for='custCountry'>Country</label>
            <select name='custCountry' data-theme='a' id='custCountry'>
                <option  value = '1'>1</option>
                <option  value = '2'>2</option>
                <option  value = '3'>3</option>
            </select>
        </div>
    </div>
</div>
<div class='ui-block-b' >
    <div class='ui-body ui-body-a' style='border:0px;'/>
    <div class='ui-field-contain'><label for='invCountry'>Country</label>
        <select name='invCountry' data-theme='a' id='invCountry'>
            <option  value = '1' selected>1</option>
            <option  value = '2'>2</option>
            <option  value = '3'>3</option>
        </select>
    </div>
</div>

的JavaScript：

$(document).on('change', '#custCountry', function(){ 
    $('#invCountry').val($('#custCountry option:selected').val());
    $('#invCountry').selectmenu('refresh', true);
});

Answer 2

您只需在适当时重置元素的“selectedIndex”。正如您已经使用jQuery一样：

$('#im_g1').prop('selectedIndex',0);