Question

我正在尝试使用bootstrap-modal创建URL缩短器。我想给用户一个选择更改域名的选项，而无需点击任何按钮或重新加载页面。这样，每次用户在select标签中选择域时，更改都会反映在（链接）上方。

给出的示例将帮助您了解更多信息。

示例（尝试实现）： https://imgur.com/a/dC6bNmh

如您所见，当用户从可用的域选项中进行选择时，域：（http://xxxxxxx.xxx/random-code）会相应地更改。

这是我到目前为止所尝试的：

（引导程序-代码）：

 <!-- Button trigger modal -->
       <button   type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#exampleModalLong">
        Make a custom link
      </button>

     <!-- Modal -->
        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                         <h4 class="modal-title" id="exampleModalLongTitle" style="display: inline-block;">Custom Link</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                                    <form>
                                        <p><h3 style="margin-bottom:0px;">Here you can make a custom link to send.</h3>
                                        (All custom links will stay active) </p>

                                         <p><h3 ><span style="color:#2196f3;">http://example.com/</span>AS34F49  <button style="float:;"  type="button" class="btn btn-info btn-xs">Copy</button></h3>
                                         </p>
                                      <div class="form-row">

                                        <div class="form-group col-md-12" style="margin-top: 10px;">
                                          <label for="inputState">Domain:</label>
                                          <select id="inputState" class="form-control">
                                            <option selected>Choose...</option>
                                            <option>domain1</option>
                                              <option>domain2</option>
                                                <option>domain3</option>

                                          </select>
                                        </div>

                                      </div>

                                           <div class="modal-footer">

                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                      </div>
                                    </form>

                       </div>
                      </div>
                    </div>
                   </div>

问题：：我是jquery或javascript的新手，如果有人提供帮助，我将不知道背后的jquery是否会非常有用。

Answer 1

只需使用JavaScript onchange()事件处理程序。

实施例下文中给出。

Learn more Javascript Event Listeners

function changeText(url){
  
  document.getElementById('mydiv').innerHTML = url;

}

<div id='mydiv'></div>
<select onchange='changeText(this.value)'>
  <option>http://google.com</option>
  <option>http://facebook.com</option>
  <option>http://twitter.com</option>
  <option>http://stackoverflow.com</option>
</select>

Answer 2

您必须在更改选择框时调用一个函数，该函数会将先前的值替换为所选的值并将span的id属性指定为

<span style="color:#2196f3;" id="dynamicDomain">http://example.com/</span>
$('#inputState').change(function(){

 var domainName = $('#inputState').find(":selected").text(); //find selected text
 $('#dynamicDomain').html(domainName); //replacing it
})

Answer 3

function DomainFunction() {
  var x = document.getElementById("selectDomaint").value;
  document.getElementById("showDomain").innerHTML = "Your domain: " + x;
}

You can try like this with javascript<br>
<select id="selectDomaint" onchange="DomainFunction()">
  <option value="Abc">Abc
  <option value="Xyz">Xyz
  <option value="123">123

</select>


<p id="showDomain"></p>

如何在不重新加载页面或不使用按钮的情况下显示（选择下拉菜单）中选定的文本值

3 个答案: