CODEWITHSUNDEEP
javascriptjqueryselectdrop-down-menu
Sebastian
Sebastian

Reputation: 3628

Get value of selected <option> in ddSlick dropdown

This currently returns undefined. What should go in the commented 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>

Upvotes: 3

Views: 13461

Answers (6)

kudzai zishumba
kudzai zishumba

Reputation: 732

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

Upvotes: 0

Gerrit de Vries
Gerrit de Vries

Reputation: 11

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

Upvotes: -2

Gerrit de Vries
Gerrit de Vries

Reputation: 11

I got it!! if you want to get the attribute value you set in your array where your data is coming 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);

Upvotes: 1

Evan Davis
Evan Davis

Reputation: 36592

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

Upvotes: 1

Zbigniew
Zbigniew

Reputation: 27604

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

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

Upvotes: 2

techfoobar
techfoobar

Reputation: 66693

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.

Upvotes: 5

Related Questions