获取选择器选项的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知识很差，所以我将不胜感激。

Answer 1

Vanilla 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>

Answer 2

I think this would help you - 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myFarm">
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option value="" selected>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>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>



<script type="text/javascript">
    $(document).ready(function(){
      $('#inputState').on('change', function() {
          $("#myFarm").attr("action", "https://example.com/"+ $(this).val()).submit();
      })
    })
 </script>

Answer 3

如果我正确理解您的问题-您需要通过选择的<option>网址来重定向用户。

为此，您可以执行以下操作：

        $(document).ready(function(){
          $(document).on('submit', '#myForm', (event) => {
           event.stopPropagation();
           const selectElement = $(this).find('#inputState');

           if(selectElement.val()){
              location.href = selectElement.val();
           }
      });
    });

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

但是，如果您要提交表单以使用<option>值作为网址，则可以执行以下操作：

<script type="text/javascript">
    $(document).ready(function(){
      $(document).on('submit', '#myForm', (event) => {
          event.stopPropagation();
          const selectElement = $('#inputState');

          if(selectElement.val()){
              $(this).attr('action', selectElement.val());
              $(this).submit();
          }
      });
    });
 </script>

upd。将代码从第一个示例移动到了代码段