JS - 将表单值插入 URL

我想创建一个可点击的 URL,这有点超出我的 JS 知识。


目标网址即:https://www.apple.com/at/shop/buy-iphone/iphone-se


创建的at/- 工作正常。我确实设法将 ieiPhone 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>


PIPIONE
浏览 142回答 1
1回答

呼如林

你可以这样做:$('#foo-list').change(function() {&nbsp; &nbsp; var opt = $(this.options[this.selectedIndex]);&nbsp; &nbsp; var url = opt.attr('data-url');&nbsp; &nbsp; var model = $("input[name='model']").val().toLowerCase().replace(" ","-");&nbsp; &nbsp; $('#url').html('<a href="https://www.apple.com/'+url+'shop/buy-iphone/' + model + '" target="_blank"&nbsp; >Apple product site</a>');&nbsp; &nbsp; &nbsp;&nbsp;});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select class="paselect" id="foo-list">&nbsp; <option data-country="Australia" data-iso="AUD" data-cur="A$" data-url="au/">Australia</option>&nbsp; <option data-country="Austria" data-iso="EUR" data-cur="&amp;euro;" data-url="at/">Austria</option>&nbsp; <option data-country="Brazil" data-iso="BRL" data-cur="B$" data-url="br/">Brazil</option></select><input name='model' type="text" value="iPhone "><p>&nbsp; <span id='url'></span><br></p>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript