Question

我希望动态更改price和id的值，并在下面的锚链接中选择不同的下拉菜单。比如如果我选择3天，则锚点中的价格会变为24，而新的oID会更改为ID。

注意：隐藏字段用于在数据库中提交数据。 $_post['deadline']。是的，纠正网址。输入错误。

<a class="btn btn-warning" href="https://example.com?price=38&id=DS123">order</a>

HTML

<div class="col-sm-6">
 <label for="price" class="control-lable">Urgency*:</label>
 <select class="form-control" name="price" id="price" onchange="func()" required>
    <option  value="">Select urgency</option>
    <option  value="24">3 Days</option>
    <option  value="38">5 Days</option>
    <option  value="62">7 Days</option>
 </select>
</div>

<input type="hidden" name="deadline" id="deadline" value="" />
<input type="hidden" name="oid" id="oid" value="" />

的Javascript

function func() {
var option = $("#price").val();
var dLine = $('#deadline').val();
var mID = new Date().getTime();
var oID = 'Q'+Math.round(mID/1000)

if (option =='24') {
  dLine = 3 Days;
  oID;
}

if (option =='38') {
  dLine = 5 Days;
  oID;
}

if (option =='62') {
  dLine = 7 Days;
  oID;     
  }
};

Answer 1

你在HTML中有不必要的隐藏字段以及jQuery中不必要的if条件（因为我无法在你的场景中看到和富有成效地使用它们）

如下所示： -

function func() {
  var option = $("#price").val();
  var mID = new Date().getTime();
  var oID = 'Q'+Math.round(mID/1000)
  $('.btn-warning').attr('href',"https://example.com?price="+option+"&id="+oID)
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6">
 <label for="price" class="control-lable">Urgency*:</label>
 <select class="form-control" name="price" id="price" onchange="func()" required>
    <option  value="">Select urgency</option>
    <option  value="24">3 Days</option>
    <option  value="38">5 Days</option>
    <option  value="62">7 Days</option>
 </select>
</div>

<a class="btn btn-warning" href="https://example.com?price=38&id=DS123">order</a>

<!-- not required <input type="hidden" name="deadline" id="deadline" value="" />
<input type="hidden" name="oid" id="oid" value="" />-->

注意： -

网址： - https://example.com&price=38&id=DS123似乎不正确，因为它需要https://example.com?price=38&id=DS123（检查查询字符串表示法?）

Answer 2

您可以在锚中放置一个ID，如： <a id="btn-order" class="btn btn-warning" href="#">order</a> 然后在你的onchange函数（func）中，执行以下操作： $('#btn-order').attr('href', 'https://example.com?price=' + option + '&id=' + oID);

Answer 3

而不是使用onchange = func（），你可以尝试使用jquery .on（）来保持它的清洁：

    $('#price').on('change', function(e){
         var $thisSelect = $(this),
             $anchor = $('.btn.btn-warning'),
             oID = 'Q'+Math.round((new Date().getTime())/1000),
             newhref = 'https://example.com/?id='+oID+'&price='+$thisSelect.val(),
             selectedText = $thisSelect.find('option:selected').text();

         $anchor.prop('href', newhref);

         $('#deadline').val(selectedText);
         $('#oid').val(oID);
   });

Answer 4

Vanilla js版本：

function func () {
   var e = document.getElementById("price");
   var price = e.options[e.selectedIndex].value;
   var button = document.getElementsByClassName('btn btn-warning')[0];

   if (price && button) {
      var mID = new Date().getTime();
      var oID = 'Q'+Math.round(mID/1000);
      button.setAttribute('href', "https://example.com?price=" + price + "&id=" + oID)
   }
}

在锚链接中动态更改值

4 个答案: