javascript - 获取选中的元素并用逗号分隔它们，最后一个元素用 "and"分隔-6ren

javascript - 获取选中的元素并用逗号分隔它们，最后一个元素用 "and"分隔

转载作者：行者123 更新时间：2023-11-28 02:51:31

29

4

我想获取选中的元素并用逗号分隔它们，最后一个元素用“and”分隔

它的显示输出为:

Expected result

我想删除最后一个元素后面的逗号 (,) 并在它前面添加 'and'，例如

Sugar, Milk and Extra chocolate

或者如果选择了两个:

Sugar and Milk

我的代码:-

<html>
  <head>
    <title>Assignment1</title>
    <script>
  	  function genresult() {
  	  	//Name
  		  var name=document.getElementById("cname").value;

  		  //Select drink
  		  var seldrink="";
  		  var drinks=document.getElementsByName("drink");
  		  for(var i = 0; i < drinks.length; i++)
  		  {
  		  	if(drinks[i].checked) {
  			    seldrink=drinks[i].value;
  			    break;
  		    }
  		  }

  		//Add ons
  		  var addons="";
  		  var addns=document.getElementsByName("addons");
  		  for(var i = 0; i < addns.length; i++)
  		  {
  		  	if(addns[i].checked) {
  		    	addons+=addns[i].value + ", " ;
  				}
  		  }
        document.getElementById("result").innerHTML = addons;

  		  //Payment mode
  		  var pay = document.getElementById("payment").value;

  		  var final= "<span>"+name+" </span> would like to have <span>"+seldrink+" </span> <br/>\
                    <span> With"+ addons +" </span> <br/>\
                    will pay by <span>"+pay+" </span>.";
  		  
  		  document.getElementById("result").innerHTML = final;
  	  }
    </script>
    <style>
    #result {
      padding: 20px;
      border: 1px solid #e5e5e5;
      background: #FAD160;
      font-size: 20px;
    }
    #result span {
    	color: #FFFFFF;
    	font-weight: bold;
    	text-decoration: underline;
      text-transform: capitalize;
    }
    </style>
  </head>
  <body>
    
    <table border="0" cellpadding="10" width="600" align="center">
      <tr>
        <td colspan="2"><h3>Order details</h3></td>
      </tr>
      <tr>
        <td>Enter you name</td>
        <td><input type="text" id="cname"/></td>
      </tr>
      <tr>
        <td>Select your drink</td>
        <td>
          <input type="radio" id="coffee" name="drink" value="Coffee"/><label for="Coffee">Coffee</label>&nbsp;&nbsp; 
          <input type="radio" id="tea" name="drink" value="Tea"/><label for="Tea">Tea</label>&nbsp;&nbsp; 
          <input type="radio" id="chocolatedrink" name="Drink" value="Chocolatedrink"/><label for="chocolatedrink">Chocolatedrink</label>
        </td>
      </tr>
          <tr>
        <td>Select Add-ons</td>
        <td>
          <input type="checkbox" id="wsugar" name="addons" value="Sugar"/><label for="wsugar">With sugar</label>&nbsp;&nbsp; 
          <input type="checkbox" id="wmilk" name="addons" value="Milk"/><label for="wmilk">With milk</label>&nbsp;&nbsp; 
          <input type="checkbox" id="wchocolate" name="addons" value="Extra chocolate"/><label for="wchocolate">With extra chocolate</label>
        </td>
      </tr>
      <tr>
        <td>Select payment mode</td>
        <td>
          <Select id="payment"/>
          <option>Credit card</option>
          <option>Debit card</option>
          <option>Cash</option>
          </Select>
        </td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Submit" id="submit-btn" onclick="genresult();"/></td>
      </tr>
      <tr>
        <td colspan="2"><p id="result">Order details as Below:</p></td>
      </tr>
    </table>
  </body>
  </html>

最佳答案

我会先抓取选中项的所有值并将它们存储在一个数组中。然后我将根据数组中的项目数使用 join 方法将数组转换为字符串。

var addns= Array.prototype.slice.call(document.getElementsByName("addons")).filter(function(el) {
            return el.checked; 
          }).map(function(el){ return el.value});

        if(addns.length) {
            if(addns.length === 2) addns = addns.join(" and ");
            else if(addns.length > 2) {
            addns.splice(-2, 2, addns[addns.length-2]+ " and " + addns[addns.length -1]);
            addns = addns.join(", ")      
          }
          addns = "With " + addns; 
        }

关于javascript - 获取选中的元素并用逗号分隔它们，最后一个元素用 "and"分隔，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39184029/

29

4

0

文章推荐： javascript - 本地文件访问并将greasemonkey脚本编译为xpi

文章推荐： javascript - div 无法正常工作

文章推荐： c++ - Raspberry 交叉编译的链接器错误

文章推荐： javascript - 多个 <script> 标签和

scala - 从尝试返回一个值 - 最后
这个问题在这里已经有了答案: “return” and “try-catch-finally” block evaluation in scala (2 个回答) 7年前关闭。为什么method1返
jquery 选择器之前-最后
我有一个动态列表，需要选择最后一项之前的项目。 drag your favorites here var lastLiId = $(".album
JMeter Once Only Controller 最后
我想为每个线程执行特定操作，因此，我认为tearDown Thread Group 不起作用。是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”？谢谢。最佳答案
Perl && 做 { 最后; };
在我的书中它使用了这样的东西: for($ARGV[0]) { Expression && do { print "..."; last; }; ... } for 循环不完整吗？另外，do 的意义何
JMeter Once Only Controller 最后
我想为每个线程执行特定操作，因此，我认为tearDown Thread Group 不起作用。是否有任何替代方法可以仅在线程的最后一次迭代时运行“仅一次 Controller ”？谢谢。最佳答案
c# - 最后:是否保证在任何情况下都会被调用
有没有可能 finally 不会被调用但应用程序仍在运行？我在那里释放信号量 finally { _semParallelUpdates.Re
css - 最后，有时倒数第二
我收藏了对齐的元素，以便它们形成两列。使用 nth-last-child 的组合和 nth-child(even) - 或任何其他选择器 - 是否可以将样式应用于以下两者之一:a)最后两个(假设
c# - 最后，是什么触发了捕获变量的新实例？
我正在阅读 Jon Skeet 的 C# in Depth . 在第 156 页，他有一个示例， list 5.13“使用多个委托(delegate)捕获多个变量实例化”。 List list = n
excel - 最后 4 个结果的总和形成具有多个条件的列
我在 AM4:AM1000 范围内有一个数据列表(从上到下有间隙)，它总是被添加到其中，我想在其中查找和总结最后 4 个结果。但我只想找到与单独列相对应的结果，范围 AL4:AL1000 等于单元格
PowerShell 尝试/捕获/最后
我最近编写了一个运行良好的 PowerShell 脚本 - 然而，我现在想升级该脚本并添加一些错误检查/处理 - 但我似乎被第一个障碍难住了。为什么下面的代码不起作用？ try { Remove-
python - 最后 else if 语句不打印
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
django 最后 30 个条目列表及计数
使用 Django 中这样的模型，如何检索 30 天的条目并计算当天添加的条目数。 class Entry(models.Model): ... entered = models.Da
java - 最后 block 不设置java中变量的值
我有以下代码。 public static void main(String[] args) { // TODO Auto-generated method stub
python - 最后 else if 语句不打印
这个问题在这里已经有了答案: Why does "a == x or y or z" always evaluate to True? How can I compare "a" to all of
java - 尝试/最后 - 工作面试
这个问题已经有答案了: Multiple returns: Which one sets the final return value? (7 个回答) 已关闭 8 年前。我正在经历几个在工作面试中
python3 : how to print groupby. 最后()？
$ cat n2.txt apn,date 3704-156,11/04/2019 3704-156,11/22/2019 5515-004,10/23/2019 3732-231,10/07/201
c++ - 最后 5 个元素的读取访问权限
我可以在 C/C++ 中设置/禁用普通数组最后几个元素的读(或写)访问权限吗？由于我无法使用其他进程的内存，我怀疑这是可能的，但如何实现呢？我用谷歌搜索但找不到。如果可以，怎样做？因为我想尝试这样
C# - 将键盘事件发送到(最后)选定窗口
我想使用在这里找到的虚拟键盘组件 http://www.codeproject.com/KB/miscctrl/touchscreenkeyboard.aspx就像 Windows 中的屏幕键盘 (O
php - 选择 *，最后(日期时间)
我正在运行一个 while 循环来获取每个对话的最新消息，但是我收到了错误 [18-Feb-2012 21:14:59] PHP Warning: mysql_fetch_array(): supp
Python 最后 60 个月末
这个问题在这里已经有了答案: How to get the last day of the month? (44 个答案) 关闭 8 年前。这是我在这里的第一篇文章，所以如果我做错了请告诉我...

首页

博学

6Ren·AI

商城

javascript - 获取选中的元素并用逗号分隔它们，最后一个元素用 "and"分隔