JS - вставить значение формы в URL

Question

Я хочу создать кликабельный URL, это немного за пределы моего знания JS.

Целевой URL-адрес: https://www.apple.com/at/shop/buy-iphone/iphone-se

Созданный at/ - работает нормально. Мне удалось изменить строку ie iPhone SE на iphone-se, но я стараюсь вставить (добавить) строку iphone-se в строку URL. Так что оба работают, но не вместе.

Это текущий статус:

$('input').keyup(function(){
  $('.model').html($(this).val().toLowerCase().replace(" ","-"));
});

$('#foo-list').change(function() {
    var opt = $(this.options[this.selectedIndex]);
    var url = opt.attr('data-url');
	$('#url').html('<a href="https://www.apple.com/'+url+'shop/buy-iphone/" target="_blank"  >Apple product site</a>');

  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select class="paselect" id="foo-list">
<option data-country="Australia" data-iso="AUD" data-cur="A$" data-url="au/"  >Australia</option>
<option data-country="Austria" data-iso="EUR" data-cur="&amp;euro;" data-url="at/" >Austria</option>
<option data-country="Brazil" data-iso="BRL" data-cur="B$" data-url="br/" >Brazil</option>
</select>

  <input name='model' type="text" value="iPhone " ><p>
  
   
  <span class="model"></span><br>
  <span id='url'></span><br>

Answer 1

Вы можете сделать это так:

$('#foo-list').change(function() {
    var opt = $(this.options[this.selectedIndex]);
    var url = opt.attr('data-url');
    var model = $("input[name='model']").val().toLowerCase().replace(" ","-");
    $('#url').html('<a href="https://www.apple.com/'+url+'shop/buy-iphone/' + model + '" target="_blank"  >Apple product site</a>');      
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="paselect" id="foo-list">
  <option data-country="Australia" data-iso="AUD" data-cur="A$" data-url="au/">Australia</option>
  <option data-country="Austria" data-iso="EUR" data-cur="&amp;euro;" data-url="at/">Austria</option>
  <option data-country="Brazil" data-iso="BRL" data-cur="B$" data-url="br/">Brazil</option>
</select>

<input name='model' type="text" value="iPhone ">
<p>
  <span id='url'></span><br>
</p>