title: How to pass selected drop down menu value to JSON function via JQuery/Javascript properly
body: <p>I am using JQuery Mobile, Javascript, HTML, JSON, AJAX, PHP and MySQL to dynamically display values from the database onto a webpage. </p>
  
  <p>I have a few elements working together. First a drop down menu that populates a list view. The drop down menu elements are obtained from the database. This is done via the "on change" method, when activated it passes the selected option and the ID of the drop down menu to a JSON function, which takes care of retrieving the data from the database with the help of PHP and functions. I also have a radio button that works as a filter to the type of results that are to be retrieved from the database and displayed on the list view.</p>
  
  <p>My problem is hopefully simpler than it looks. I am trying to pass my JSON function the value of the selected option from the drop down menu. I know that the JSON wants an object, but I am having problems doing this.</p>
  
  <p>To illustrate how I try to do this, let's say I have a drop down list with fruits, I have a radio button that allows you to choose from Red fruits or Green fruits, and a list view to display my results:</p>
  
  <pre><code>&lt;div data-role="fieldcontain"&gt;
      &lt;fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"&gt;
  
          &lt;input type="radio" name="radio" id="red" value="1" checked="checked" onchange="change_fruit_color('red');"/&gt;
          &lt;label for="red"&gt;Red Fruits&lt;/label&gt;
          &lt;input type="radio" name="radio" id="green" value="2" onchange="change_fruit_color('green');"/&gt;
          &lt;label for="green"&gt;Green Fruits&lt;/label&gt;
  
      &lt;/fieldset&gt;
  &lt;/div&gt;
  
  &lt;li&gt;
      &lt;label for="fruit" class="select"&gt;Fruits&lt;/label&gt;
      &lt;select name="fruit" id="fruit" data-mini="true" onclick="populate_list('fruit', this);" onchange="clear_dropdown('fruit'); refresh_dropdown('fruit');"&gt;
          &lt;option value=""&gt;&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Note that I have a few extra functions, refresh_dropdown() and clear_dropdown() handle refreshing my drop down list items, nothing to worry about there. The populate_list function works good too. The issue is regarding the logic of the change_fruit_color() function:</p>
  
  <pre><code>function change_fruit_color(fruit_color)
  {
      var selected_value = $("#fruits option:selected").text();
  
      if(selected_value)
      {
          switch(fruit_color)
          {
              case "red":
              populate_list('red', selected_value);
              break;
  
              case "practice":
              populate_list('green', selected_value);
              break;
          }
          clear_dropdown("fruit");
          refresh_dropdown("fruit");
      }
  }
  
  function populate_list(selected_fruit, this_menu)
  {
      var find_fruit_url = server_root_url + 'fruit/find_fruit.php';
      var value = this_menu.options[this_menu.selectedIndex].value;
  
      var params = {
          control: selected_fruit,
          value: value
      };
  
      $.ajax({
      type: "POST",
      url: find_fruit_url,
      async:false,
      data: params,
          success: function(json){
              json_populate(json, selected_fruit, value);
          }
      });            
  }
  </code></pre>
  
  <p>As you can see, I can call the populate_list three times; once within the "onclick" function of the drop down list, the other within the change_fruit_color that's called via the "onchange" event in the radio button box. In here is where the issue lies.</p>
  
  <p>I tried to make a sample of my general issue so that I write way less code for all of you to read through. Any help on how to proceed would be greatly appreciated!</p>