用户从下拉列表中选择选项后,如何从嵌套对象访问数据,然后传递给href属性

时间:2019-07-18 16:11:33

标签: javascript html css javascript-objects

我正在尝试使用eventListener将与用户从下拉列表中选择的任何选项相关联的链接添加到HTML中每个div的href属性中。

我已经创建了所有这些链接,并将它们存储为对象。我只能在呼叫特定键时才能访问它们。嵌套在主父对象中的每个对象都有三个键和值{keys:values}。

<!DOCTYPE html>
<html>

<head>
  <style>
    .form {
      width: 25%;
      height: inherit;
      overflow: auto;
      float: left;
    }
  </style>
</head>

<body>
  <form class="form" action="result.html" method="POST">
    <h1 class="productName">Div 1</h1>
    <img src="img\red.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
    <select name="category" class="package">
      <option value="Selected an option" default>Select an option</option>
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <a href="" class="submit"><button type="submit" >Try it</button></a>
  </form>

  <form class="form" action="result.html" method="POST">
    <h1 class="productName">Div 2</h1>
    <img src="img\yellow.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
    <select name="category" class="package">
      <option value="Selected an option" default>Select an option</option>
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <a href="" class="submit"><button type="submit" >Try it</button></a>
  </form>

  <form class="form" action="result.html" method="POST">
    <h1 class="productName">Div 3</h1>
    <img src="img\blue.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
    <select name="category" class="package">
      <option value="Selected an option" default>Select an option</option>
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <a href="" class="submit"><button type="submit" >Try it</button></a>
  </form>

  <form class="form" action="result.html" method="POST">
    <h1 class="productName">Div 4</h1>
    <img src="img\black.jpg" alt="Trial Image" width="10%" height="100%" class="images productImg"><br>
    <select name="category" class="package">
      <option value="Selected an option" default>Select an option</option>
      <option value="Business Plan">Business Plan</option>
      <option value="Feasibility Report">Feasibility Report</option>
    </select>

    <a href="" class="submit"><button type="submit" >Try it</button></a>
  </form>

</body>
  <script src="index.js"></script>
</html>

let testArrays = {

  'product101' :{
  'businessPlan': 'http://localhost/projects/link1a',
  'feasibilityReport': 'http://localhost/projects/link1b',
  'bizPlanReport': 'http://localhost/projects/link1c'
  },

  'product102' : {
    'businessPlan': 'http://localhost/projects/link2a',
    'feasibilityReport': 'http://localhost/projects/link2b',
    'bizPlanReport': 'http://localhost/projects/link2c'
  },

  'product103' : {
    'businessPlan': 'http://localhost/projects/link3a',
    'feasibilityReport': 'http://localhost/projects/link3b',
    'bizPlanReport': 'http://localhost/projects/link3c'
  },

  'product104' :{
    'businessPlan': 'http://localhost/projects/link4a',
    'feasibilityReport': 'http://localhost/projects/link4b',
    'bizPlanReport': 'http://localhost/projects/link4c'
  }

};


  const forms = document.querySelectorAll(".form");
  for (const form of forms) {
    form.addEventListener('submit', function (event) {
      event.preventDefault();

      let package = this.querySelector('.package').value;

      if(package == 'Business Plan'){
        let link = this.querySelector('.submit').href = testArrays.product101.businessPlan;
        let message = this.querySelector('.submit').innerText = 'Try ' + package;
      } 
      else if(package == 'Feasibility Report'){
        let link = this.querySelector('.submit').href = testArrays.product102.feasibilityReport;
        let message = this.querySelector('.submit').innerText = 'Try ' + package;
      } 
      else {
          alert('You must select an option');
      }; 
    });
  }

我的期望是将每个数组分配给一个div。我正在考虑如何使用for循环,但不确定该怎么做。

如果我做错了,请纠正我,或者提供示例和解决方案。

欢呼

1 个答案:

答案 0 :(得分:2)

将链接与选择值关联的最佳方法是使选择值与对象键相同。

<form id="form">
  <select name="select" id="mySelect">
    <option default value="choice1">Choice One</option>
    <option value="choice2">Choice Two</option>
  </select>
  <button type="submit">Submit</button>
</form>

<script>
  let plans = {
    choice1: "https://mylink.com",
    choice2: "https://myotherlink.com"
  }

  let select = document.querySelector("#mySelect")
  let form = document.querySelector("#form")

  form.addEventListener("submit", event => {
    event.preventDefault()
    alert(plans[select.value])
  })
</script>

  

选项valueplans对象中的键匹配,因此它们可以匹配。

这是一个实时示例:https://codesandbox.io/s/static-ncgzp