CODEWITHSUNDEEP
javascriptjquery
user1471980
user1471980

Reputation: 10626

how to pick dropdown list item

I need to create a dropwdown list box and based on the value/id of the list box, I need to show different chart on my div using jquery:

this is my dropdown list box:

<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>

this is the part that chart will go depening on the select value from this list:

    <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>

This is the highcharts part to create the chart:

//this is function is working, I have tested this with some other methods

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

I am doing this, but not getting any errors or charts, any ideas what I am missing here?

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

    });

Upvotes: 0

Views: 76

Answers (3)

Diego Pamio
Diego Pamio

Reputation: 1358

You could do this:

<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>

and then:

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]();
});

Here you have the working sample: http://jsfiddle.net/dpamio/mvHqT/

Upvotes: 0

Mariusz Jamro
Mariusz Jamro

Reputation: 31633

Use change listener from jQuery:

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

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

Define a change event for your select, get the selected value, and go from there (assign values to your option elements)

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

Upvotes: 3

Related Questions