1

In firefox 46.0.1, there is only one select element with some option elements. The select value attribute is being changed by a javascript code and as confirmation for that, in the browser inspector window

<select value="G" data-id="someid"> and one of the options is
<option value="G">G please</option>

But in the console:
$('select').first().val() gives empty string as in "" and thus the display does not show the selected option as I expect.

And if I issue $('select')[0].value = "R", the display responds by showing the correct option value.

Why and how to fix this so that it shows the correct option when the javascript code chnages the value attribute of the select element? Thanks

<template name="select">
  <select data-id={{_id}} value={{value}}>
    {{#each values}}
      <option value={{value}}>{{caption}}</option>
    {{/each}}
  </select>
</template>

The value is populated by Meteor Template helper.

edit
here is the underlaying data from the helper: "sample"

{
    "_id" : "SqNF9wTsbaxEhj5b4",
    "element" : "select",
    "action" : "action12",
    "values" : [
        {
            "group" : "bCode",
            "value" : "G",
            "caption" : "Select food type..."
        },
        {
            "group" : "bCode",
            "value" : "O",
            "caption" : "water"
        },
    ],
    "userId" : "uhx7rt",
    "createdAt" : 1464135235771,
    "value" : "G"
}
Fred J.
  • 5,759
  • 10
  • 57
  • 106
  • This seems to be straight forward to solve, just show us your code in more detail. – emerson.marini May 24 '16 at 23:42
  • Possible duplicate of [set select option 'selected', by value](http://stackoverflow.com/questions/13343566/set-select-option-selected-by-value) – emerson.marini May 24 '16 at 23:43
  • @MelanciaUK the link you posted is not a duplicate since the value is dynamically obtained from a template helper as the case in my question. – Fred J. May 24 '16 at 23:51
  • @ochi The question is NOT about how to change the value using the console but why the value is not being displayed despite of the `attr value` is given the correct option to display using the dynamic template. – Fred J. May 24 '16 at 23:56
  • @ochi value on the `select` element as stated in [w3s](http://www.w3schools.com/jsref/prop_select_value.asp) – Fred J. May 25 '16 at 00:01
  • I'd recommend removing the `value` attribute from the `select` and issuing your `$('select')[0].value = "R"` and see the results – blurfus May 25 '16 at 00:06
  • @ochi Your suggestion has already been tried and works fine as indicated in my question. But the point is not how to change the value using the console but rather the browser select element is not responding to the template helper when the value attribute of the select element changes. – Fred J. May 25 '16 at 00:08
  • Without the `value` attribute in the select? It's not clear to me that when you *manually* select an option from the list, you actually update the attribute value. That's why I am asking (third time lucky here) - what happens if you remove the `value` attribute from the `select` element and (programmatically or manually) change the `select` element's value? – blurfus May 25 '16 at 00:11
  • You don't use `value` on select you set `selected` on option – charlietfl May 25 '16 at 00:17
  • @ochi I removed the `value` attr from the `select` for no avail, the value from the select element gets to the underlaying code fine via a button on the page and that is how it gets back in the select.value as confirmed in my question. then changing the value manually via the console works as always but failed via the Template helper. – Fred J. May 25 '16 at 00:25
  • In that case, we might need to know more about the other code (that's setting the value) or other events acting on the element. Are there any errors in console? – blurfus May 25 '16 at 00:29
  • @charlietfl As you suggested, it works now, I had to not use the value attr on selected but use the selected attr on the option. – Fred J. May 25 '16 at 02:56
  • You can add your own answer and mark it as such for the benefit of others :) – blurfus May 25 '16 at 03:37

1 Answers1

0

as charlietfl suggested in the comments. I had to give up on using the value attribute on the select element and instead I used the selected attribute on the option element.

And as it was suggested in another post that Meteor does not allow empty value for html attributes. I had to remove the attribute for the options where it is not selected.

Fred J.
  • 5,759
  • 10
  • 57
  • 106