jquery - 使用 Jquery 动态设置选项卡标题

Question

我有一个下拉菜单和三个选项卡，

根据我收到的值，我想设置标题和 ID，

  <select class="easyui-combobox" name="state" style="width:200px;">
  <option value="DN">Denmark</option>  
  <option value="SG">Singapore</option>  
  <option value="JP">Japan</option>    
    </select> 

如果值为 DN，则

<div class="easyui-tabs" style="..." >
<div title="Denamrk"><table id="dg1">...</table</div>
<div title="DAN"><table id="dg2">...</table</div>
<div title="Danish Currency"><table id="dg3">...</table</div>
</div>

或者是否可以使用 url 并从服务器获取选项卡数据？tab 或 div 是否有数据选项？

Answer 1

试试这个： -

http://jsfiddle.net/adioo7/fT5vt/2/

JS：-

var arrValues = {
    "DN": {
        0: "Denmark",
        1: "DAN",
        2: "Danish Currency"
    },
        "SG": {
        0: "Singapore",
        1: "SG",
        2: "SG Currency"
    },
        "JP": {
        0: "Japan",
        1: "JP",
        2: "JP Currency"
    }
};

function updateTabs() {
    var selectedOption = $('#dropdown').combobox('getValue');
    for (var i = 0; i <= 2; i++) {
         var tab = $('#tabs').tabs('getTab',i);
        $('#tabs').tabs('update', {
            tab: tab,
            options: {
                title: arrValues[selectedOption][i]
            }
        });
    }
}

$(function () {
    $('#tabs').tabs();
});

HTML:-

<select id="dropdown" class="easyui-combobox" data-options="  
        onSelect: updateTabs" name="state" style="width:200px;">
    <option value="DN">Denmark</option>
    <option value="SG">Singapore</option>
    <option value="JP">Japan</option>
</select>
<div id="tabs" class="easyui-tabs" style="...">
    <div title="Denmark">
        <table id="dg1">...</table>
    </div>
    <div title="DAN">
        <table id="dg2">...</table>
    </div>
    <div title="Danish Currency">
        <table id="dg3">...</table>
    </div>
</div>