Question

我有一个Javascript存储默认电话号码的变量，但我希望用户能够根据选择菜单中的选项覆盖此变量。如果他们从菜单中进行选择，我希望使用所选选项中的新值更新Javascript变量。

这是脚本：

＆＃13;

$("#callContact1").click(function() {
  $.ajax({
      url: "https://www.server.com/callback.php?recipientNumber=0412345678&type=makecall",
      data: {},
      type: "GET"
    })
    .then(function(data) {
      $('#ajaxResponse').html(data).show();
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an requesting the call back. HTTP Status: ' + httpStatus;
      console.log('ajaxError: ' + ajaxError);
      //make alert visible 
      $('#ajaxResponse').html(ajaxError).show();
    })
})

＆＃13;

我想修改＆＃39; recipientNumber = 0412345678＆＃39;每当更改此选择菜单时，在AJAX请求函数的URL中：

＆＃13;

<select class="form-control" name="callBackNumber" id="callBackNumber">
<option value=""></option>
<option value="0418468103" selected>Mobile (0412345678)</option>
<option value="0294846565">Work (0299887766)</option>
<option value="0233445566">Home (0233445566)</option>        				
</select>

＆＃13;

我不确定这是否可行，或者是否有更好的方法来构建它以达到相同的效果？

Answer 1

使用$("#callBackNumber").on("change", function() {并传递this.value号码

$("#callBackNumber").on("change", function() {

  var number = this.value;

  if(!number) {
    return console.log("Please select a number!"); // 
  }

  // Now let's use that number
  $.ajax({ 
      url: "https://www.server.com/callback.php?recipientNumber="+ number +"&type=makecall",
      data: {},
      type: "GET"
    })
    .then(function(data) {
      $('#ajaxResponse').html(data).show();
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an requesting the call back. HTTP Status: ' + httpStatus;
      console.log('ajaxError: ' + ajaxError);
      //make alert visible 
      $('#ajaxResponse').html(ajaxError).show();
    })
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" name="callBackNumber" id="callBackNumber">
<option value=""></option>
<option value="0418468103" selected>Mobile (0412345678)</option>
<option value="0294846565">Work (0299887766)</option>
<option value="0233445566">Home (0233445566)</option>        				
</select>

Answer 2

当然有可能，你做了类似的事情;）

选择元素支持的change事件，该事件从下拉列表中选择选项后触发。

$('#callBackNumber').on('change', (event) => {
  const value = event.target.value

  fireCallback(value)
})

ofc你必须编写fireCallback函数，它将执行该操作

Answer 3

使用 defaultPhoneNumber 创建一个全局变量。

var defaultPhoneNumber = $("#callBackNumber").val();

更改下拉列表时更新该变量。

$("#callBackNumber").change(function(){
  defaultPhoneNumber  = $(this).val();
});

并使用网址

中的更新值

 $.ajax({
      url: "https://www.server.com/callback.php?recipientNumber="+ defaultPhoneNumber  +"&type=makecall",
      data: {},
      type: "GET"
});

Answer 4

我就是这样做的：

var phoneNum = "0412345678";
$("#callBackNumber").change(function() {
  phoneNum = $(this).val();
});

Here is the JSFiddle demo

创建一个全局变量，始终在ajax URL中连接它。每次更改下拉列表时更新变量的值。您将始终在变量中具有最新值，因此在您的ajax URL中。

HTML选择菜单 - 在更改时修改Javascript变量

4 个答案: