Bootstrap自定义jQuery [英] Bootstrap Custom jQuery

问题描述

我正在尝试让一些自定义的jQuery与Bootstrap一起使用，但是我对Bootstrap还是很陌生.

I am trying to get some custom jQuery working with Bootstrap, but I am still fairly new with Bootstrap.

我有一个适用于HTML 5的文档:

I had a HTML 5 doc where this worked:

     $('#assigned_agent_c').change(function(){
    var agent_id = $('#assigned_agent_c').val();
    var name = $('#assigned_agent_c :selected').text();
    var phone = $('#assigned_agent_c :selected').attr('data-phone');
    $('.my_name').text(name);
    $('.set_phone').text(phone);
    $("#user_id").val(agent_id);

});

与此HTML结合:

<span class="my_name" name="assigned_agent_c"></span>

我还有一个下拉列表，其ID为Assigned_agent_c:

I also have a dropdown select with the id assigned_agent_c:

                <div class="form-group border">
                <label for="assigned_agent_c"><h2>Select User:</h2></label>
                <select class="form-control" id="assigned_agent_c" name="assigned_agent_c">
                     <option value="" selected></option>
        <option data-phone='555-555-5555' data-email='[e-mail]' data-nmls='000000' data-bio='www.somesite.com' value='crm_id' data-image="<img src='http://somesite.com/images/user_bio.png' />">My User</option>

基本上，jQuery将使用在下拉列表中为Assigned_agent_c选择的名称，并将该名称放置在span元素中.电话号码和用户ID的作用相同.如何在Bootstrap中重新介绍呢?

Basically, the jQuery would take the name selected in the dropdown for assigned_agent_c, and place the name in the span element. It does the same thing with the phone number and user id. How can I reporoduce this in Bootstrap?

仅供参考:整个页面基本上是一种表单，因此，如果有区别，我将使用Bootstrap表单元素.

FYI: the whole page is basically a form, so I am using the Bootstrap form elements, if that makes a difference.

如果您需要更多信息，请告诉我.谢谢！

Let me know if you need more info. Thanks!

推荐答案

好的，在收到更多详细信息之后.我敦促您查看此参考.

Okay so after receiving more details. I urge you to look at this reference.

http://api.jquery.com/data/

例如，由于您选择的项目使用数据电话"和数据电子邮件"，因此您可以使用

In example, since your select item uses 'data-phone' and 'data-email' you can use

$('#assigned_agent_c :selected').data('phone')

获取当前所选项目的电话.或

to get the phone of the currently selected item. or

$('#assigned_agent_c :selected').data('email')

获取当前所选项目的电子邮件. 您仍然可以使用

to get the email of the currently selected item. You should still be able to use

$('#assigned_agent_c :selected').text()

选择当前名称

我已经为您创建了一个小提琴，请单击此行.

这篇关于Bootstrap自定义jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！