0

したがって、選択ボックスでアイテムを選択し、ボタンをクリックして、選択したアイテムの値と IDを以下のリストビューに追加します。問題は、リストビューのように見えないことです。新しいアイテムがリストに表示されますが、奇妙に見えます。自分で試してみてください。製品を含む選択ボックスの HTML があります (選択ボックスのオプションは、mysql から jQuery で動的に生成されます。それには触れません。実行時に選択された「prodselect」に値と ID が含まれていることを知っておいてください。 ):

<ul data-role="listview" data-theme="c" data-count-theme="b" data-inset="true">
<li>
    <div data-role="fieldcontain">
        <label for="prodselect" class="select">Choose product:</label>
        <select name="prodselect" id="prodselect">
        </select>
        <input type="button" name="appeprod" id="appeprod" value="Append product" data-icon="add" data-inline="true"/>
        </div>            
        </li>
</ul>

クリック時に選択オプションを追加する HTML の部分 (appeprod.click)

<ul name="listaprod" id="listaprod" data-role="listview" data-theme="c" data-divider-theme="e" data-count-theme="b" data-inset="true">
   <li data-role="list-divider">
        <h3 class="ui-li-heading">Selected Products</h3>
   </li>            
   <li id="products" name="products">
   </li>
</ul>

そのため、アイテムを「製品」セクションに挿入したいのですが、それを行うには、次のスクリプトがあります。

$(document).ready(function(){
        $('#appeprod').click(function() {
            var option = $('#prodselect').val();
            var box = document.getElementById('prodselect');
            var option2 = box.options[box.selectedIndex].text;
            $('#listaprod').append('<div data-theme="e" data-role="button">'+option2+' xxx</div>');
        });        
});

基本的に、ボタンをクリックすると、#prodselect で選択された値を #listaprod に追加します。ただし...このjsfiddleでわかるように、選択したアイテムの表示は見苦しく見えます...それらは通常のjquery mobile ulリストアイテムのようには見えません。どこかにフォーマットがありませんか？

4

1 に答える 1

0

動的に作成されたコンテンツを追加する場合は、正しい jQuery Mobile スタイルで拡張する必要があります。

この場合、これは機能します：

$('#pg_invoicedtl').trigger('pagecreate');

または完全な JavaScript:

$(document).ready(function(){
    $('#appeprod').click(function() {
        var option = $('#prodselect').val();
        var box = document.getElementById('prodselect');
        var option2 = box.options[box.selectedIndex].text;
        $('#prodlist').append('<div data-theme="e" data-role="button" id="button_'+option2+'">'+option2+'</div>');
        $('#pg_invoicedtl').trigger('pagecreate');
    });        
});

作業例: http://jsfiddle.net/q8wjh/1/

このトピックについて詳しく知りたい場合は、私のブログARTICLEを参照してください。このトピックに関する十分な情報が見つかります。

于 2013-07-10T07:17:37.020 に答える