2016-04-07 15 views
1

私はjQuery v1.10.2を使用しています。選択ドロップの値を変更する必要があります。私は両方のモバイルとデスクトップのビュー(どちらも異なるHTMLファイルを持っている)の両方に同じjsファイルを使用しています。jQuery v 1.1x選択オプションの値を変更する

$('#cType').val('visa'); 
$("#cType").prop("selectedIndex", 1); 

それはデスクトップのため正常に動作して値を変更しますが、モバイルのためにそれが動作しない:これらは私がドロップダウンの値を変更しようとした二つのアプローチです。携帯電話とデスクトップの場合は、これは私が使用しているHTMLコードです:

<div class="cTypeContainer"> 
    <label for="cType"><span class="red">&#42;</span>Card Type</label> 
     <select name="cType" class="ui-nodisc-icon ui-alt-icon" id="cType"> 
       <option>Select</option> 
       <option value="visa">Visa</option> 
       <option value="master">Master Card</option> 
       <option value="discover">Discover</option> 
       <option value="amExpress">American Express</option> 
     </select> 
</div> 

私はなぜそれが携帯電話のために働いているのかわかりません。私はjQueryモバイルを使用していますが、おそらくそれが動作していると思いますか?

+0

モバイルChrome(https://jsfiddle.net/q7rhxnhn/2/)で問題なく動作しています。使用している特定のモバイルブラウザやその他の競合するコードである可能性がありますか? – Michael

+0

私が観察したことの一つは、 'jquery.mobile.custom.structure.css'ファイルを含めなければ、うまく動作することです。なぜこのCSSファイルがJSの問題を引き起こしているのか分かりません。これは非常に長いjQueryファイルを作成したものです。そのため、このコードがどの行で折れているのかがわかりにくいのです。 – anwartheravian

+0

私はそれをさらにデバッグし、値が変更されていることを知りました。そのjQueryモバイルは、可視領域に最初の値だけが表示されるようにスタイルを設定しています。 – anwartheravian

答えて

0

私はこれにJSコードを変更し、それが魅力のように働いた:

$('#cType').val('visa').selectmenu('refresh'); 

それがないすべては、基本的には、動的に選択された値を表示するようにスタイリングをリフレッシュしています。

関連する問題