This currently returns undefined. What should go in the mented line to alert the value (1, 2, 3 or 4) of the current <option> tag?

<select id="dropdown" name="dropdown">
        <option value="0" data-imagesrc="images/icons/all.png">All Questions</option>
        <option value="1" id="friends" data-imagesrc="images/icons/friends.png">Friends</option>
        <option value="2" data-imagesrc="images/icons/friends_of_friends.png">Friends of Friends</option>
        <option value="3" data-imagesrc="images/icons/network.png"><?php echo $network; ?></option>
        <option value="4" data-imagesrc="images/icons/location.png"><?php echo $location ?></option>
</select>

<script type="text/javascript">
$('#dropdown').ddslick({
showSelectedHTML: false,
    onSelected: function(selectedData){
    var str = $(this).attr('id'); // WHAT SHOULD GO HERE?
    alert(str);
    }   
});
</script>

EDIT

If it's relevant, I'm using this plugin.

Perhaps this question might help. I'm trying to make sense of it.

Managed to figure this out. Final working code is:

<select id="dropdown" name="dropdown" value="hello">
        <option value="0" data-imagesrc="images/icons/all.png">All Questions</option>
        <option value="1" id="friends" data-imagesrc="images/icons/friends.png">Friends</option>
        <option value="2" data-imagesrc="images/icons/friends_of_friends.png">Friends of Friends</option>
        <option value="3" data-imagesrc="images/icons/network.png"><?php echo $network; ?></option>
        <option value="4" data-imagesrc="images/icons/location.png"><?php echo $location ?></option>
</select>

<script type="text/javascript">
$('#dropdown').ddslick({
    showSelectedHTML: false,
    onSelected: function(data){
        alert(data.selectedData.value);
    }   
});
</script>

This currently returns undefined. What should go in the mented line to alert the value (1, 2, 3 or 4) of the current <option> tag?

<select id="dropdown" name="dropdown">
        <option value="0" data-imagesrc="images/icons/all.png">All Questions</option>
        <option value="1" id="friends" data-imagesrc="images/icons/friends.png">Friends</option>
        <option value="2" data-imagesrc="images/icons/friends_of_friends.png">Friends of Friends</option>
        <option value="3" data-imagesrc="images/icons/network.png"><?php echo $network; ?></option>
        <option value="4" data-imagesrc="images/icons/location.png"><?php echo $location ?></option>
</select>

<script type="text/javascript">
$('#dropdown').ddslick({
showSelectedHTML: false,
    onSelected: function(selectedData){
    var str = $(this).attr('id'); // WHAT SHOULD GO HERE?
    alert(str);
    }   
});
</script>

EDIT

If it's relevant, I'm using this plugin.

Perhaps this question might help. I'm trying to make sense of it.

Managed to figure this out. Final working code is:

<select id="dropdown" name="dropdown" value="hello">
        <option value="0" data-imagesrc="images/icons/all.png">All Questions</option>
        <option value="1" id="friends" data-imagesrc="images/icons/friends.png">Friends</option>
        <option value="2" data-imagesrc="images/icons/friends_of_friends.png">Friends of Friends</option>
        <option value="3" data-imagesrc="images/icons/network.png"><?php echo $network; ?></option>
        <option value="4" data-imagesrc="images/icons/location.png"><?php echo $location ?></option>
</select>

<script type="text/javascript">
$('#dropdown').ddslick({
    showSelectedHTML: false,
    onSelected: function(data){
        alert(data.selectedData.value);
    }   
});
</script>

• javascript
• jquery
• select
• drop-down-menu

• do you want to get value of selected option when you select it? – Behnam Esmaili Commented Dec 21, 2012 at 18:23
• Yes, so the choices are 0, 1, 2, 3 or 4. – Sebastian Commented Dec 21, 2012 at 18:25
• What's in selectedData? Isn't that the selection? – Evan Davis Commented Dec 21, 2012 at 18:26

6 Answers 6

Use $(this).val() in place of $(this).attr('id')

The value of the currently selected <option> is returned when you call .val() on the <select> element.

$('#dropdown').ddslick({
showSelectedHTML: false,
    onSelected: function(selectedData){
    var str = $(this).val()
    alert(str);
    }   
});

So, use val() instead of attr('id')

According to the docs for your plugin, the onSelected method gets the selectedData parameter:

selectedData (nested object with text, value, description, imageSrc)

The text label and value are available as selectedData.text and selectedData.value inside the onSelected function. Try this:

$('#dropdown').ddslick({
    showSelectedHTML: false,
    onSelected: function(selectedData){
        var str = selectedData.value
        alert(str);
    }   
});

I got it!! if you want to get the attribute value you set in your array where your data is ing from you get your value like this->

$('#id').ddslick({
    data:dropdowndata,
    width:60,
    selectText: "Select Circle",
    imagePosition:"left",
    //dropdowndata[4].selected:true
    onSelected: function(selectedData){ 
    val = selectedData.selectedIndex;
    alert(dropdowndata[val].value); 

if you want to post the data, create a hidden input, use jquery to set the value of the hidden field then post the hidden field

$('.ddslick_drop_down').ddslick({ onSelected: function(selectedData){ //set the value to a hidden field then post the hidden field $('#dish_id').val(selectedData.selectedData.value);

I got the selected index from ddslick and assinged a value to seperate input >fields.this way I can have input fields to control my form. I've been coding >for 3months now so i don't really know what i'm doing. This is a long way of >doing it but it seems to work so...

onSelected: function(selectedData){
    alert("selectedData.selectedIndex");
    if(selectedData.selectedIndex == 1 ){
        $("#input1").html(selectedData.selectedIndex);
    }
    if(selectedData.selectedIndex == 2 ){
        $("#input2").html(selectedData.selectedIndex);
    }
    if(selectedData.selectedIndex == 3 ){
        $("#input3").html(selectedData.selectedIndex);
    }
}