0

所以我想在选择框中选择一个项目，然后单击一个按钮，将所选项目的值和 ID添加到下面的列表视图中。问题是，我似乎没有让它看起来像一个列表视图。新项目出现在列表中，但看起来很奇怪。请自己尝试所以我有包含产品的选择框的 HTML（选择框的选项是在 jQuery 中从 mysql 动态生成的。我不会涉及到。只要知道选择“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>');
        });        
});

所以基本上，在按钮单击时，我想附加到#listaprod，即在#prodselect 中选择的值。但是...正如您在此jsfiddle中看到的那样，所选项目的显示看起来很丑...它们看起来不像常规的 jquery 移动 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/

如果您想了解有关此主题的更多信息，请查看我的博客文章，您将找到有关此主题的更多信息。

于 2013-07-10T07:17:37.020 回答