javascript - 获取选择器选项的 URL 并将其添加为提交按钮的链接

Question

我试图在我的选择器中获取一个选项的 URL 值并将其添加到提交按钮，以便当用户选择选项 1 时，它的 URL 被添加到提交按钮 url。

例如，如果选项 1 URL 是<option><a href="https://example.com/1">1</a></option>按钮应该跟随链接https://example.com/1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose an option</option>
        <option><a href="https://example.com/1">1</a></option>
        <option><a href="https://example.com/2">2</a></option>
        <option><a href="https://example.com/3">3</a></option>
        <option><a href="https://example.com/4">4</a></option>
      </select>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

不幸的是，我的 js 知识很差，所以我非常感谢任何帮助。

标签： javascripthtml

Answer 1

香草JS解决方案：

---

您可以在运行时根据选择设置锚标记的 href 属性。

window.onload = function() {

  document.querySelector('#inputState').addEventListener('change', function(event) {

    document.querySelector('#anchorSubmit').setAttribute('href', `https://www.example.com/${event.currentTarget.value}`);

  });

}

<form>
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected value="">Choose an option</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </div>
  </div>
  <a id="anchorSubmit">
    <button id="btnSubmit" type="submit" class="btn btn-primary">Submit</button>
  </a>
</form>