Changing div contents based on user select not working

Discussion in 'jQuery' started by wiser3, Aug 1, 2013.

0
  1. #1
    Simple dynamic change... or so i thought.

    User selects an option from a select list and i update a couple divs based on which item they picked.

    In my code below the hard coded "Mexico" correctly updates the div with the proper contents. I can't get it to use the value of the variable picked instead.

    // Set variable to location selected
$("select").change(function () {
$("select option:selected").each(function () {
picked = $(this).text();
 
// Line below shows the correct data for Mexico
// How do i make "Mexico" the variable 'picked' to show the data that was selected?
 
$("div.state").html("<p>Distributors for: " + picked + "</p>");
$("div.locations").html(jQuery.data(div, "location").Mexico);
 
})
})
.change();
    Code (markup):

     
    wiser3, Aug 1, 2013 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    Post the HTML as well if you can.
     
    HuggyStudios, Aug 2, 2013 IP
  3. wiser3

    wiser3 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Here's the latest version of my entire page with just the list of option tags shortened.

    <!DOCTYPE html>
<html>
<head>
<style>
div { color:brown; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<select name="state" size="5">
<option selected="selected">Select a State</option>
<option>Mexico</option>
<option>Alabama</option>
<option>Alaska</option>
</select>
<div class="state"></div>
<div class="locations"></div>
 
<script>
// Initial set of global variables
var picked = "";
 
// Set array of text for each state
var div = $("div.locations")[0];
    jQuery.data(div, "location", {
        "State" : "",
        "Mexico" : "<p>Mexico Name<br />Mexican address<br />State<br />Phone</p>",
        "Alabama" : "This is Alabama",
        "Alaska" : "They selected Alaska"
});
 
// Set variable to location selected
$("select").change(function () {
$("select option:selected").each(function () {
picked = $(this).text();
 
// Line below shows the correct data for Mexico
// How do i make "Mexico" the variable 'picked' to show the data that was selected?
 
$("div.state").html("<p>Distributors for: " + picked + "</p>");
$("div.locations").html(jQuery.data(div, "location").Mexico);
 
})
})
.change();
 
</script>
</body>
</html>
    Code (markup):
     
    wiser3, Aug 2, 2013 IP
  4. hello-universe

    hello-universe Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    You are trying to get an object property using a variable.

    Change
    1. $("div.locations").html(jQuery.data(div, "location")[picked]);
     
    hello-universe, Aug 2, 2013 IP
  5. wiser3

    wiser3 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    Thank you, that works perfectly.

    I had tried square brackets put was also putting in the dot navigation
     
    wiser3, Aug 2, 2013 IP