How to specify what to copy in Javascript

Question

I have a little script that copys whats in the drop down. But I want the drop to display the firstname and when the firstname is selected I want it to copy the lastname outside. I need to use an attribute other than VALUE

JS:

function copy() {
    document.getElementById("label").innerHTML = 
        document.getElementById("mySelect").value
}

HTML:

<div id="label"></div>

<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
    <option value="firstname" id="lastname">Firstname</option>
    <option value="firstname" id="lastname">Firstname</option>
    <option value="firstname" id="lastname">Firstname</option>
    <option value="firstname" id="lastname">Firstname</option>
</select>

or see here http://jsfiddle.net/r6Fus/

I don't understand the problem. Could you provide an example of the result you want to get? Please clarify your question. — Felix Kling, Jan 28 '13 at 13:55
right now the script copies the value of VALUE='' to the outside of the drop down. I want so when I select this firstname I want it to copy the lastname outside. — Dev-Ria, Jan 28 '13 at 13:58
I don't see any `` in your code. But it seems instead of the value of the `select` element, you want to copy the ID of the selected `option` element? — Felix Kling, Jan 28 '13 at 14:01
possible duplicate of [How to get selected option ID?](http://stackoverflow.com/questions/1904827/how-to-get-selected-option-id) — Felix Kling, Jan 28 '13 at 14:09
not sure if its a duplicate but It doesn't answer my question. — Dev-Ria, Jan 28 '13 at 14:13
I just asked you whether you want to get the ID of the selected option and you said yes. — Felix Kling, Jan 28 '13 at 14:14
well it would be more helpful to explain how it relates to my question. Just cause its an ID doesnt mean its a duplicate. If you dont know the answer it wont help pasting a link. — Dev-Ria, Jan 28 '13 at 14:17
You are asking how to get the ID of the selected option element. That's exactly what the other question is about as well: *"How to get selected option ID"*. That's why those answers there will also answer your question. Especially this answer: http://stackoverflow.com/a/1904882/218196. Did you even read it? If this is not what you are asking about, then I wonder why you answered *"yes, that is what I need."* to my previous question. — Felix Kling, Jan 28 '13 at 14:19
ok, like i said pasting does not help as I have no clue how to incorporate it into the code above. where would it go? — Dev-Ria, Jan 28 '13 at 14:20
Inside the `copy` function. The other answer mentions that `select` is a valid SELECT element. In your case you get the SELECT element with `document.getElementById("mySelect")`. Answers you will find here are rarely copy&paste-able, because that's not he purpose of SO. It's more about concepts and as a developer it is important that you can apply concepts to your particular situation. — Felix Kling, Jan 28 '13 at 14:22
i tried `var selecting_id = options[selectedIndex].id function copy() {document.getElementById("label").innerHTML=document.getElementById("mySelect").selecting_id}` but output says `undefinded` — Dev-Ria, Jan 28 '13 at 14:26
As I said, the other answer (http://stackoverflow.com/questions/1904827/how-to-get-selected-option-id/1904882#1904882) is more helpful for you -- and we cannot spoon-feed solutions to everyone. — Felix Kling, Jan 28 '13 at 14:29
i didn't need you to 'spoon-feed' me. Just because it makes sense to you and it's easy for you to read does not mean everyone can see it like that. I've only be working with javascript for literally 3 days. — Dev-Ria, Jan 28 '13 at 14:36

score 3 · Answer 1 · edited May 23 '17 at 12:05

You should't misuse an element's id attribute just for the sake of providing an <option> with additional data. As suggested in another answer, you could instead specify an additional attribute like data-lastname and later access that in your script (the following code is untested).

Your HTML could look like:

<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
    <option value="firstname" data-lastname="lastname">Firstname</option>
    <option value="firstname" data-lastname="lastname">Firstname</option>
    <option value="firstname" data-lastname="lastname">Firstname</option>
    <option value="firstname" data-lastname="lastname">Firstname</option>
</select>

Your JS function could look like:

function copy() {
  var sel = document.getElementById('mySelect');
  var selected = sel.options[sel.selectedIndex];
  var firstname = selected.value;
  var lastname = selected.getAttribute('data-lastname');
  // do stuff...
}

Roy · Accepted Answer · 2013-01-28T15:59:27.380

2

Add a data-surname attribute to each <option>:

<option value="tcs" data-surname="Washington" >tcs</option>

(You can do this with ID but data attribute seems a better solution in this case)

Then update your function to rerieve the surname attribute: (using jQuery is recommended)

function copy( {
  $("#label").html($("#mySelect option:selected").data("surname"))
}

Working example (try the first option in the menu) - jsFiddle

edited Jan 28 '13 at 15:59

answered Jan 28 '13 at 14:28

Roy

1,307
1
13
29

1

@FelixKling MCL's answer looks pretty good for pure javascript solution – Roy Jan 28 '13 at 14:31

How to specify what to copy in Javascript

2 Answers2