javascript HTML选择选项与EJS

p3rjfoxz  于 2024-01-05  发布在  Java
关注(0)|答案(4)|浏览(149)

我正在为我的Web应用程序进行配置,尝试将其渲染到网页.下面是我的代码的一部分.我想选择的config[0].volume的选项有.所以,如果config[0].volume是'50',所选的选项将是'50'.代码运行良好.但我想知道. '我如何缩短这段代码?'所以我的代码冗长.

  1. <select id="volume">
  2. <option value="1" <%= config[0].volume == '1' ? 'selected' : ''%>>1</option>
  3. <option value="5" <%= config[0].volume == '5' ? 'selected' : '' %>>5</option>
  4. <option value="10" <%= config[0].volume == '10' ? 'selected' : '' %>>10</option>
  5. <option value="50" <%= config[0].volume == '50' ? 'selected' : '' %>>50</option>
  6. <option value="75" <%= config[0].volume == '75' ? 'selected' : '' %>>75</option>
  7. <option value="100" <%= config[0].volume == '100' ? 'selected' : '' %>>100</option>
  8. </select>

字符串
我想了2个小时,但什么也没有出现。也许我必须使用jQuery或JavaScript,并添加属性来拥有它,

  1. attr('selected')... ?


我不知道,你能帮我吗?

zbdgwd5y

zbdgwd5y1#

您可以根据选项值将其放入循环中。

  1. <select id="volume">
  2. <%
  3. var options = [ "1", "5", "10", "50", "75", "100" ];
  4. for ( var i = 0; i < options.length; i++ )
  5. {
  6. var selected = ( config[0].volume == i ) ? "selected" : "";
  7. %><option value="<%=options[ i ] %>" <%=selected %>><%=i %></option><%
  8. }
  9. %>
  10. </select>

字符串

qnyhuwrf

qnyhuwrf2#

有一个错误与当前的答案,所以我想分享我的解决方案,我发现。
举个例子,我正在制作一个闹钟,并希望在一个选择字段中输入“小时”值(0到12)。

  1. <select name="hour">
  2. <% var options = []; %>
  3. <% for(var i = 0; i <= 12; i++) { %>
  4. <option value='<%= i %>'><%= i %></option>
  5. <% } %>
  6. </select>

字符串
请注意,name="hour"用于在通过POST请求传递时标识所选值。假设您正在运行类似的设置,您可以使用req.body.hour获取此值。

  • 服务器端:Node. js/ Express
  • 客户端:EJS/HTML
zxlwwiss

zxlwwiss3#

为什么不使用jQuery(或纯JS)?

  1. <p class="row ">
  2. <label class="col-lg-12">Language</label>
  3. <select id="lang" class="input col-lg-12">
  4. <option hidden value="">Select one</option>
  5. <option value="ru">Russian</option>
  6. <option value="en">English</option>
  7. <option value="ua">Ukranian</option>
  8. </select>
  9. <script defer>
  10. jQuery('#lang').val("<?= newsPost.lang ?>")
  11. </script>
  12. </p>

字符串

mqxuamgl

mqxuamgl4#

  1. <select id="volume">
  2. <% options.forEach((subject,index) => { %>
  3. <option value="<%-options.id %>" <%= options[index] === index ? 'selected' : '' %>>
  4. <%- subject.title %>
  5. </option>
  6. <%})%>
  7. </select>

字符串
你也可以做这样的事情。

相关问题