CODEWITHSUNDEEP
jquery
JoaMika
JoaMika

Reputation: 1827

Change div value based on <select> option

Using this great plugin

http://exodecreations.com/jQuery/jqDropDown.html

My Jquery code:

jQuery(function() {  
  jQuery('#list4').jqDropDown({ 
    optionChanged: function(){
      jQuery("#firmos").html('My New Text');
    }, 
    direction: 'up', 
    defaultStyle: false, 
    containerName: 'theContainer', 
    toggleBtnName: 'awesomeToggleClass', 
    optionListName: 'thisListIsRocking', 
    effect: 'fade', 
    effectSpeed: 300 
  });
});

My php code:

<form action="#">
  <select id="list4" name="invoices">
    <option>Aspen</option>
    <option>Tokyo</option>
    <option>Cannes</option>
    <option>Capetown</option>
    <option>Paris</option>
    <option>Nice</option>
    <option>Geneva</option>
  </select>
</form>

Based on the option selected i would like the div with id #firmos to change its value.

My current example changes the div text to a single value but i will need a different value for each option..

Any efficient ideas? The list of cities will be around 50.. maybe define an attribute within each <option> ?

Upvotes: 0

Views: 455

Answers (2)

Oscar Jara
Oscar Jara

Reputation: 14187

Well, I looked that this plugin just replicates a select element in a list <li> and seems not possible to get the exact changed value from the select because it doesn't change if you see the DOM (that makes me assume that the onchange event from that plugin is used just to trigger something when your list changes).

So, it seems you need to do some tricky thing to get the selected value implementing an onchange event recreation.

Like this:

Live Demo: http://jsfiddle.net/oscarj24/nuRKE/

$(function () {

    var firmos = $('#firmos');

    $('#list4').jqDropDown({
        direction: 'up',
        defaultStyle: false,
        containerName: 'theContainer',
        toggleBtnName: 'awesomeToggleClass',
        optionListName: 'thisListIsRocking',
        effect: 'fade',
        effectSpeed: 300
    });

    //This will be your new 'onchange' event when using 'jqDropDown' plugin.
    $('ul .ddOption').on('click', function(e){
        var selected = $.trim($(e.target).text());
        switch (selected)
        {
          case 'Aspen':
            firmos.html('You selected Aspen.');
            break;
          case 'Tokyo':
            firmos.html('You selected Tokyo.');
            break;
          //Do the same for other options.
        }

    });
});

Upvotes: 0

John Hartsock
John Hartsock

Reputation: 86892

I believe this may work. 

jQuery("#firmos").html($(this).val());

In your document ready function it would look like this.

jQuery(function() {  
  jQuery('#list4').jqDropDown({ 
    optionChanged: function(){
      jQuery("#firmos").html($(this).val());
    }, 
    direction: 'up', 
    defaultStyle: false, 
    containerName: 'theContainer', 
    toggleBtnName: 'awesomeToggleClass', 
    optionListName: 'thisListIsRocking', 
    effect: 'fade', 
    effectSpeed: 300 
  });
});

Edited

Actually if you want to redisplay the option in another element this control has a parameter called place holder

you could do this.

jQuery(function() {  
  jQuery('#list4').jqDropDown({ 
    placeholder: '#firmos',
    direction: 'up', 
    defaultStyle: false, 
    containerName: 'theContainer', 
    toggleBtnName: 'awesomeToggleClass', 
    optionListName: 'thisListIsRocking', 
    effect: 'fade', 
    effectSpeed: 300 
  });
});

Edited Again

If you want a custom value you can do something like this

jQuery(function() {  
  jQuery('#list4').jqDropDown({ 
    optionChanged: function(){
      jQuery("#firmos").html((function (currentElement) {
        switch (currentElement.val())
        {
          case "someval":
            return "somethingSpecial1";
            break;
          case "someval2":
            return "somethingSpecial2";
            break;
          /// more case statements.
        }
      })($(this)));
    }, 
    direction: 'up', 
    defaultStyle: false, 
    containerName: 'theContainer', 
    toggleBtnName: 'awesomeToggleClass', 
    optionListName: 'thisListIsRocking', 
    effect: 'fade', 
    effectSpeed: 300 
  });
});

Upvotes: 2

Related Questions