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

Identify each select option individually using simple JavaScript or jQuery and show in DIV

本文关键字：选项 选择 并在 显示 DIV 识别 简单 JavaScript 单独 jQuery      更新时间：2023-09-26

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

现在，我还想将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>

我建议：

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

JS小提琴演示。

请注意，这假设使用特定的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);
    });​

引用：

  • appendTo() .
  • each() .
  • prependTo() .
  • slice() .
相关文章：