使用或不使用表单的“选择”字段在页面中显示价格值[关闭]

问题描述 投票:0回答:1

在页面中,我显示的价格根据用户选项而变化。

有 2 个下拉菜单,用户可以从每个下拉菜单中选择一个选项。

根据用户选择的 2 个值,显示正确的价格。

  1. 我应该像菜单一样创建 JS 下拉菜单还是使用表单的

    select

  2. 如果使用

    select
    必须在表单内吗?或者应该在表格内?

    我的想法是使用Javascript,这样当选择一个选项时,价格就会更新。

javascript html semantic-markup
1个回答
1
投票

在这里您可以在 select 中提供 name 属性,其值与 form 标签相同。

function OnSubmit(ev) {
    //prevents reload on clicking the submit button inside form
    ev.preventDefault();

    // Here we get the selected value from the select input
    let cars1 = ev.target.cars1,
    cars2 = ev.target.cars2;

    // Here we print the selected value of two selects name : car1 and car2
    console.log(
        cars1.options[cars1.selectedIndex].value,
        cars2.options[cars2.selectedIndex].value
     );
 }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <form id="carform" onsubmit="OnSubmit(event)">
      <button type="submit">submit</button>
    </form>

    <br />

    <select id="cars1" name="carlist1" form="carform">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>

    <select id="cars2" name="carlist2" form="carform">
      <option value="E">E</option>
      <option value="F">F</option>
      <option value="G">G</option>
      <option value="H">H</option>
    </select>

  </body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.