引导自定义 jQuery

Question

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

我有一个 HTML 5 文档，它可以工作：

     $('#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 的下拉选择：

                <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='example@email.com' 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 中重新生成？

仅供参考：整个页面基本上是一个表单，所以我使用 Bootstrap 表单元素，如果这会有所不同的话。

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

Answer 1

好的，在收到更多详细信息后。我敦促你看看这个参考。

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

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

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

获取当前选中项目的电话。或

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

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

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

选择当前名称

I've created a fiddle for you, click this line.