JSFiddle - React, Tailwind, and code Playground
HTML
<label>
Точка отправления: <select id="derivalPoint"></select>
</label>
<label>
Точка прибытия: <select id="arrivalPoint"></select>
</label>
габаритные места
<label for=""><input type="text" id="sizedWeight" value="5"/> кг</label>
<label for=""><input type="text" id="sizedVolume" value="1"/> м<sup>3</sup></label>
<input type="hidden" value="0" id="oversizedWeight"/>
<input type="hidden" value="0" id="oversizedVolume"/>
<input type="button" id="calc" value="Посчитать"/>
CSS
label {
display:block;
}
JavaScript
$("#calc").click(function(){
$("#calc").attr('disabled', true).val("Подождите...")
$.ajax({
url: 'http://public.services.dellin.ru/calculatorTool2/index.html?mode=calc&answerType=jsonp&callback=setPrice'
, data: {
derivalPoint: $('#derivalPoint').val()
, arrivalPoint: $('#arrivalPoint').val()
, sizedWeight: $('#sizedWeight').val()
, sizedVolume: $('#sizedVolume').val()
, oversizedWeight: $('#oversizedWeight').val()
, oversizedVolume: $('#oversizedVolume').val()
, rnd: '0.6040447200648487'
}
, type: 'POST'
, dataType: 'jsonp'
, success: function(data){
console.log(data)
}
})
});
window['setPrice'] = function(data){
$("#calc").attr('disabled', false).val(data.result)
}
var c_url = 'http://public.services.dellin.ru/autocomplete/?answerType=jsonp&callback='
$.ajax({
url: c_url+'arrivalPointRender'
, data: {q: 'М'}
, dataType: 'jsonp'
, success: function(data){ console.log(data) }
})
window['arrivalPointRender'] = function(data){
var html = '', selected = false;
for(var i = 0; i < data.length; i++){
html += '<option value="'+data[i].code+'"'+(selected?'':' selected')+'>'+data[i].city+'</option>'
selected = true
}
$('#arrivalPoint').html(html)
}
$.ajax({
url: c_url+'derivalPointRender'
, data: {q: 'С'}
, dataType: 'jsonp'
, success: function(data){ console.log(data) }
})
window['derivalPointRender'] = function(data){
var html = '', selected = false;
for(var i = 0; i < data.length; i++){
html += '<option value="'+data[i].code+'"'+(selected?'':' selected')+'>'+data[i].city+'</option>'
selected = true
}
$('#derivalPoint').html(html)
}