Question

我需要创建一个下拉列表框，并根据列表框的值/ id，我需要使用jquery在我的div上显示不同的图表：

这是我的下拉列表框：

<td>
    <select name="Calls" id="middle">
      <option value="Land">Land</option>
      <option value="Cell">Cell</option>
      <option value="Skype">Skype</option>
      <option value="Google">Google</option>
    </select>
</td>

这是图表将依赖此列表中的选择值的部分：

    <div id="tab15">
        <div id="container">
            <table >
                <tr>

                    <td>

                              <div class="zoom_controls">
                                  <a class="profile" style="width: 100px;" id="calls" href="#" data-chart="line" data-range="1m">PHONE CALLS</a>
                            </div>
                            <br>

        <div class="main" id="phone_calls" style="width:700px; height:300px;"></div>
</table>
</div>
</div>

这是创建图表的高级图表部分：

//这是功能正常，我用其他一些方法测试了这个

function phone_call_list() {

    $.getJSON('get_data.php', function(data) {

        // Create a timer

        // Create the chart
    var chart = new Highcharts.StockChart({
         chart: {
                borderColor: '#98AFC7',
                borderRadius: 20,
                borderWidth: 1,
                renderTo: 'phone_calls', //div in html to render the highcharts

我这样做，但没有得到任何错误或图表，我在这里缺少什么想法？

$("#middle").change(function() {
    var selected = this.value; //value of selected attribute
        if (selected == "Land"){
            phone_call_list();
        }

    });

Answer 1

为您的选择定义change事件，获取所选值，然后从那里开始（为option元素指定值）

$("#middle").change(function() {
    var selected = this.value; //value of selected attribute
    if (selected == "call1") //do stuff
});

Answer 2

使用jQuery中的change侦听器：

$("#middle").change(function() {
    var selectedValue = $(this).val();
    // do something with the value
});

Answer 3

你可以这样做：

<td>
    <select name="Calls" id="middle">
        <option id="call1" value="call_function1" >Land</option>
        <option id="Call2" value="call_function2">Cell</option>
        <option id="Call3" value="call_function3">Skype</option>
        <option id="Call4" value="call_function4">Google</option>
    </select>
</td>

然后：

var obj = {
    call_function1: function() {
        alert("now showing chart 1");
    },
    call_function2: function() {
        $("#middle").css("margin","30px");
    },
    call_function3: function() {
        $("#Call3").text("SKYPE");
    },
    call_function4: function() {
        alert("now showing chart 4");
    }

};

$('#middle').on("click", function(){
    obj[this.value]();
});

这里有工作样本：http://jsfiddle.net/dpamio/mvHqT/

如何选择下拉列表项

3 个答案: