为什么创建动态下拉框看起来不太好?

时间:2017-07-06 03:03:08

标签: javascript jquery html jquery-mobile jquery-plugins

我使用jQuery mobile 1.4.5和jQuery 1.8.3以及jQuery-ui- 1.9.2

我在这里动态创建了Dropbox:

function setLayerPropertyControls() {

    var content = '<fieldset style="border: solid 1px #6b6b6b;">';

    content += '<label for="select-native-1">Basic:</label>' +
              '<select name="select-native-1" id="select-native-1">' +
                   '<option value="1">The 1st Option</option>' +
                   '<option value="2">The 2nd Option</option>' +
                   '<option value="3">The 3rd Option</option>' +
                   '<option value="4">The 4th Option</option>' +
               '</select>';

    content += '</fieldset>';
    layerProp.append(content);
}

这是html标记:

<div data-role="page" id="layerProperty">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1 id="layers property"></h1>
        <a href="#mapPage" data-mini="true" data-icon="arrow-l">חזור</a>
    </div>

    <div data-role="content">
        <div id="vectorLayerProperties">
        </div>
        <div id="vectorLayerslist"></div>
    </div>
</div>

这里是视图中的结果:

enter image description here

如果我拿这个代码:

 <div class="ui-field-contain">
        <label for="select-native-1">Basic:</label>
        <select name="select-native-1" id="select-native-1">
            <option value="1">The 1st Option</option>
            <option value="2">The 2nd Option</option>
            <option value="3">The 3rd Option</option>
            <option value="4">The 4th Option</option>
        </select>
    </div>

将其粘贴到HTML中:

<div data-role="page" id="layerProperty">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1 id="layers property"></h1>
        <a href="#mapPage" data-mini="true" data-icon="arrow-l">חזור</a>
    </div>


    <div data-role="content">
        <div id="vectorLayerProperties">

            <div class="ui-field-contain">
                <label for="select-native-1">Basic:</label>
                <select name="select-native-1" id="select-native-1">
                    <option value="1">The 1st Option</option>
                    <option value="2">The 2nd Option</option>
                    <option value="3">The 3rd Option</option>
                    <option value="4">The 4th Option</option>
                </select>
            </div>

        </div>
        <div id="vectorLayerslist"></div>
    </div>

</div>

看起来像这样:

enter image description here

当我尝试在代码中动态创建它时,为什么我会得到下拉框的不良风格呢?

1 个答案:

答案 0 :(得分:-2)

你的动态代码有这个 <fieldset style="border: solid 1px #6b6b6b;"> </fieldset>;
但纯粹的HTML没有。

所以我想也许是css层问题?