Question

我有一个下拉列表（SELECT1），看起来像这样：

<select id="ff_elem263">
<option selected="selected" value="0">Choose amount</option>
<option value="32">50</option>
<option value="52">100</option>
<option value="78">150</option>
<option value="95">200</option>
<option value="119">250</option>
<option value="606">1500</option>
</select>

我在列中需要两个输出：
首先，我需要使用以下HTML输出在网站上显示所有选项：

（仅可选项-第一条显示“选择数量”的索引行将被忽略）
预期的输出是这样的：

第二我需要显示计算结果，其中的数字由一个已经预先创建的另一个变量划分。 / p>

让我们将变量称为“ devider”，并（例如）将其设置为3。因此50/3 = 16,6666、100 / 3 = 33,3333等，等等。

所以第二列看起来像这样：

16,6666 33,3333 50 66,6663 83,3333 500

我将这些数字添加到ID = demo2的div中

作为结果，我将需要此：

50 16,6666 100 33,3333 150 50 200 66,6663 250 83,3333 1500 500

我试图混合使用不同的方法-但没有运气。我什至无法仅输出仅显示选项的第一列。（不是值）。

示例1。这将在弹出窗口中显示选项。但是我需要它作为我网站上的文本：

$(function(){ var values = $('select').children('option').map(function(i,e){ return e.innerText; }).get(); alert(values); });

示例2：console.log。我也尝试过此操作，但无法弄清楚如何从SELECT1元素中提取数据。并且避免完全使用console.log。最好直接在我的网站上输出文本。

var friends_arr = ["Sonarika","Vishal","Sunil","Vijay"]; $(document).ready(function(){ $.each(friends_arr, function(index,value){ console.log( index + " : " + value ); }); });

我目前正在使用该软件进行实验：

<p id=demo1></p> $(function(){ var values = $('select1').children('option').map(function(i,e){ return e.innerText; }).get(); alert(values); });

但是如何将结果作为HTML文本输出到我的DIV ID = demo1？我还认为这里需要添加某种分离器吗？

Answer 1

尝试一下会有所帮助

$(document).ready(function(){
  $("#ff_elem263 option").each(function()
  {
	if($(this).val() != "0"){
           var val = parseInt($(this).html())/3;
  	   $("#demo2").append("<label>"+$(this).html()+" "+val.toFixed(4)+"<label>");
    }
  });
})

label{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ff_elem263">
<option selected="selected" value="0">Choose amount</option>
<option value="32">50</option>
<option value="52">100</option>
<option value="78">150</option>
<option value="95">200</option>
<option value="119">250</option>
<option value="606">1500</option>
</select>

<div id="demo2">

</div>

Answer 2

var values = [];
$('#ff_elem263 option').each(function() { 
    values.push( $(this).attr('value') );
    if($(this).attr('value') != 0){
      $( "#demo" ).append("<div>"+$( this ).text()+"::"+$( this ).text()/3+"</div><br/>");
    }
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ff_elem263">
<option selected="selected" value="0">Choose amount</option>
<option value="32">50</option>
<option value="52">100</option>
<option value="78">150</option>
<option value="95">200</option>
<option value="119">250</option>
<option value="606">1500</option>
</select>
<div id="demo">
</div>

如何在网站上显示下拉列表的所有选项？

2 个答案: