根据所选选项更改按钮网址

Question

如何根据所选选项更改按钮URL？

例如：如果有人选择“中心”，则按钮网址将更改为“ center.html”。

我找到了一些示例，但大多数示例都使用选项字段中的值。我尝试了其中一些，但对我没有用。

到目前为止，我已经尝试过：

<div class="container">
  <div class="row">
      <div class="col-md-12">
        <div class="form-group text-center">
            <label for="exampleFormControlSelect1">Select below</label>
                    <select class="form-control" id="exampleFormControlSelect1">

      <option value="esplande">Esplanade</option>
      <option value="satelite">Satelite</option>
      <option value="paradise">Paradise</option>
      <option value="center">Center</option>

                    </select>

                  </div>  
                     <a href="paradise.html" id="test">
                       <button class="btn btn-danger"> NEXT </button>
                                                               </a>
           </div>
       </div>
   </div>



 <script>



$(document).on('change', '#exampleFormControlSelect1', function() {
    var value = $(this).val();
    $('#test').attr('center', 'value'+'.html');
});



       </script>

它不起作用，URL不变。

Answer 1

尝试一下

$(document).on('change', '#exampleFormControlSelect1', function() {
    var value = $(this).val();
    $('#test').attr('href', value+'.html');
});