Question

我有一个PHP代码，主动生成一个包含5个不同选项的Select输入。

现在，我还希望将div中的数字2,3,4和5显示为文本。

请注意，我想省略DIV中的第一个选项。

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

同样要显示：

<div><img src="#" /> 2</div>
<div><img src="#" /> 3</div>
<div><img src="#" /> 4</div>
<div><img src="#" /> 5</div>

我尝试使用document.forms [0] .select.value;但它只显示所选值而不是所有选项。此外，我想过滤第一个选项，所以我该怎么办？任何帮助表示赞赏。

select元素的实际HTML，由OP在答案的评论中提供：

<select class="last" id="property_types" name="property_types">
    <option selected="selected" value="0">View all Property Types</option>
    <option value="96" class="level-0">Apartment</option>
    <option value="9" class="level-0">Building</option>
    <option value="3" class="level-0">Land</option>
    <option value="97" class="level-0">Office</option>
</select>

Answer 1

我建议：

$('option').slice(1).each(
    function(){
        var text = $(this).text(),
            outputTo = $('#output'),
            div = $('<div />').text(text),
            img = $('<img />', {'src' : '#'}).prependTo(div);
        div.appendTo(outputTo);
    });

JS Fiddle demo

请注意，这假设使用了特定的div来包含此方法的输出，显然可以根据口味进行调整。

上面的代码修改为提供一个特定的选择器，以响应OP在本答案的评论中发布的代码：

$('#property_types option').slice(1).each(
    function(){
        var text = $(this).text(),
            outputTo = $('#output'),
            div = $('<div />').text(text),
            img = $('<img />', {'src' : '#'}).prependTo(div);
        div.appendTo(outputTo);
    });

参考文献：

使用简单的JavaScript或jQuery单独识别每个选择选项并在DIV中显示

1 个答案: