0

it's my first weekend with Javascript (coming from a Matlab background) and after an amazingly productive Saturday I've been stuck on this for hours, any help very much appreciated!

I'm trying to detect the value of one Drop down box and then update another from the Parse backend, one is top level industries the other is sub-industries. This seems like it should be pretty easy from the other answers on here but whilst it detects the change it never actually updates the second box. The data arrives fine from Parse. I'm using the Foundation framework, latest version of jQuery and Handlebars in other parts if that could make a difference.

The HTML:

<form class="custom">

<div class="large-6 columns">



  <label for="IndustryDropDown">Area of interest</label>
  <select id="IndustryDropDown" class="small">
    <option>All</option>
    <option>Technology</option>
    <option>Services</option>
    <option>Financial</option>
    <option>Consumer goods</option>
    <option>Materials and mining</option>
  </select>

</div>

<div class="large-6 columns">

  <label for="SubIndustryDropDown">Specific interest</label>
  <select id="SubIndustryDropDown" class="small">
  <option>Select Area first</option>
  </select>
</div>

</form>

The JS:

$("#IndustryDropDown").change(function(){

  var SubIndustry = Parse.Object.extend("SubIndustry");
  var query = new Parse.Query(SubIndustry);


  // change this to a case statement once working

  if ($(this).val() == "Technology"){

      var Industries = Parse.Object.extend("Industries");
      var industries = new Parse.Query(Industries);
      query.descending("Name");
      query.equalTo("Industry", "Technology")

        query.find({
          success: function(results) {

            $(results).each(function(i,e) {
              var q = e.toJSON();
              console.log(q.Name) // this prints out the Name entries as expected
              $('SubIndustryDropDown').append( new Option(q.Name, q.Name));
            });//for each  

          },//sucess
          error: function(error) {
            console.warn("error finding quote")
}
});
iammarkhammond
  • 191
  • 3
  • 9
  • I'm not sure what this "parse" javascript framework is, but it has nothing to do with the usual meaning of "parsing"... – dequis Apr 07 '13 at 20:05
  • Apologies I was referring to Parse [link](https://parse.com/) which is essentially a back end as a service but the tag must have autocompleted – iammarkhammond Apr 08 '13 at 09:43

1 Answers1

0
$('SubIndustryDropDown').append( new Option(q.Name, q.Name));

jQuery ID selectors require #, otherwise you're selecting an element with that name (no html element exists with that name, but it could happen with xhtml)

So $('#SubIndustryDropDown'). Also, append() needs a parameter that is either an html string, a DOM node, or a jquery object containing that DOM node. I don't know if that Option object is valid for jQuery, but if it fails do something like .append($("<option>").attr("value", q.Name).text(q.Name)) (that's just how I'd generate the html for the option tag, there might be better ways)

dequis
  • 2,100
  • 19
  • 25
  • Hi, thanks so much for the response, the lack of # would definitely been a problem but surprisingly it still doesn't do anything, I also tried all of the ways put forward on [this](http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery) thread. Would it help if I put the files somewhere public? – iammarkhammond Apr 08 '13 at 10:01
  • Yes, actually, if you try to get a minimal test case of code with the same behavior that doesn't work, it's very likely that you'll find by yourself what part you did wrong. Either that, or you get an actual minimal test case that shows the issue, and lets other people see it, heh. – dequis Apr 09 '13 at 01:24
  • Although the code you posted is fairly minimal... but I have no idea how to set up this `Parse` library or if it depends on a backend server. So yeah, upload something that I can debug and we'll see. – dequis Apr 09 '13 at 01:30