HTML get name of select option

Question

I want to get name of the select option, but it appears to be blank, demonstrated in codepen. Getting value works though, so I want to get name in the same manner.

As you can see, name is different for each option so it cannot be added in the <select>, and I want to avoid using data- as it would require hard-coding this edge case into re-usable functions.

http://codepen.io/anon/pen/wJzQWW?editors=1010

<select>
  <option name="" value="" selected>Or</option>
  <option name="tags" value="123">And</option>
  <option name="not-tags" value="123">Not</option>
</select>

this is probably going to confuse the hell out of your html form. `option`s typically dont have "name" components. Can you explain what you're trying to do by using `name` on an `option`? — haxxxton, Mar 07 '17 at 00:07
@haxxxton backend parses `name` by splitting at `-` characters and reading each component. If the first component is `not`, then it does a SQL `NOT` query, etc. There are other similar modifiers for querying, this is just one example. — davidtgq, Mar 07 '17 at 00:13
Can you take advantage of the `value` attribute? or you need that for something else? Alternatively, if you _must_ use `name`, you may need a js solution that creates a `hidden` input with the `name` dynamically created for what you're after, as your current solution is going to cause you strife IMO — haxxxton, Mar 07 '17 at 00:19

score 2 · Answer 1 · edited May 23 '17 at 12:00

2

Maybe you have a confusion. The tag option doesn't have a name attribute. The name attribute can exist in the select tag.

If you want to know which option has been selected, you have to listen the change event for the select element and take the valueattribue. Look here.

Or maybe you can try whit something like dataset, but you have to always listen the change event.

edited May 23 '17 at 12:00

Community

1
1

answered Mar 07 '17 at 00:15

Santiago Barchetta

121
1
8

Okey. Sorry about that. But it's a weird question. Look in the [oficial spec](https://www.w3.org/wiki/HTML/Elements/option). Option doesn't have a name attribute. One of the correct ways if you want to do something like that its to use dataset. – Santiago Barchetta Mar 07 '17 at 00:29
1

Yes I know, that's what I said in my question to avoid using `data-` and I said why. Event listeners seems excessive for this. You've nothing to apologize for. But the three voters who thought this deserved more attention than the other two answers that have actual working solutions need to have their brains checked. – davidtgq Mar 07 '17 at 00:31

score 1 · Accepted Answer · answered Mar 07 '17 at 00:23

1

$(input).find(":selected") will get you the selected option, from there you can use val() and attr() to get the values

    function parseInputs(jqElem, selector = ':input', payload = '') {
      for (let input of $(jqElem).find(selector)) {
        const value = $(input).find(":selected").val();
        const name = $(input).find(":selected").attr("name");
        if (!value) {
          continue
        }
        payload += `&${name}=${value}`;
      }
      return payload.substring(1);
   }

answered Mar 07 '17 at 00:23

Joakim Tangnes

56
3

Thanks. This will still require some hard-coding into the reusable function, but it's probably the best I'll get with the current spec. One question: Why do you use `const`? I tried it with `let` and it seems to work, but is there a reason not to use it? – davidtgq Mar 07 '17 at 00:35
You could use "let", "var" or "const", all will work. But seeing as the value and name probably won't change within that scope, setting them as constants is the best approach, both technically and "humanly". – Joakim Tangnes Mar 07 '17 at 00:50

score 0 · Answer 3 · answered Mar 07 '17 at 00:21

0

This is a VERY weird question, but I won't bitch about that. Here's how you do it the kickass way:

function parseInputs(jqElem, selector = ':input', payload = '') {
  payload ="";
  $(jqElem).find(selector).each(function () {
      input = $(this);
      payload += "&"
                + $(this).find("option[value=\"" + input.val() + "\"]").attr("name") //just a heads up, if there is more than one with the same value, this won't work...
                + "=" + 
                input.val();
  });
  return payload;
}

$('#asdf').on('click', () => {
  console.log(parseInputs('#wtf'));
});

answered Mar 07 '17 at 00:21

Neil

14,063
3
30
51

1

That worked. I'm not sure if it's the best solution (still reading through the logic) and I'm not sure why someone downvoted you without commenting, but it deserves at least a vote because it works. – davidtgq Mar 07 '17 at 00:28
2

I don't think it is the best solution either, but this functionality really isn't existent in native HTML. Sorry, mate; I hope you get a better solution. – Neil Mar 07 '17 at 00:31

HTML get name of select option

3 Answers3