HTML Wählen Sie Menü - ändern Javascript-Variable bei Änderung

Question

Ich habe ein Javascript, das eine Variable für eine Standard-Telefonnummer speichert, aber ich möchte, dass Benutzer diese basierend auf den Optionen in einem Auswahlmenü überschreiben können. Wenn sie eine Auswahl aus dem Menü treffen, möchte ich, dass die Javascript-Variable mit dem neuen Wert aus der ausgewählten Option aktualisiert wird.

Hier ist das Skript:

$("#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(); 
 
    }) 
 
})

Ich mag den Wert des 'recipientNumber = 0412345678' in der URL der AJAX-Request-Funktion ändern, wenn dieses Auswahlmenü geändert wird:

<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>   \t \t \t \t 
 
</select>

Ich bin nicht sicher, ob dies möglich ist oder ob es eine bessere Möglichkeit gibt, dies zu konstruieren, um das gleiche Ergebnis zu erzielen.

Answer 1

eine globale Variable erstellen mit Ihrem defaultPhoneNumber.

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

Diese Variable bei Änderung der Dropdownliste aktualisieren.

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

Und aktualisierten Wert verwenden in URL

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

Answer 2

Verwendung $("#callBackNumber").on("change", function() { und übergeben Sie die this.value Nummer

$("#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>   \t \t \t \t 
 
</select>

Answer 3

Sicher, es ist möglich, und Sie haben etwas Ähnliches getan;)

wählen change Veranstaltung Elementträger, die nach feuert Wählen Sie eine Option aus dem Dropdown-Menü.

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

    fireCallback(value) 
}) 

OFC Sie haben fireCallback Funktion zu schreiben, die das Ding tun

Answer 4

Dies ist, wie ich es tun würde:

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

Here is the JSFiddle demo

eine globale Variable erstellen, immer verketten es in der Ajax-URL Aktualisieren Sie den Wert der Variablen, wenn das Dropdown-Menü geändert wird. Sie haben immer den neuesten Wert in Ihrer Variablen und damit in Ihrer Ajax-URL.