2 name and value attribute in one select-CodePudding

I have database that have users ID,name,shopCode.

what I am looking for is when the user select the supervisor, also will get shopCode value for selected supervisor. Is there way to have 2 name and 2 value attribute in select tag ?

  <select name="supervisor_ID shopCode_ID" id="supervisor_ID shopCode_ID">
    <% for (const i in supervisor) { %>
      <option value="<%= supervisor[i].id supervisor[i].shopCode%>"> <%= supervisor[i].name %> </option>
      <% } %>
 
  </select>

CodePudding user response：

You can use data attribute for additional information like below

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

CodePudding user response：

You can set both the values with a seperator and then split up the seperator to get the values. For example:

let selectbox = document.querySelector('select');
selectbox.addEventListener('change', function(e) {
  let val = this.value.split(':');
  alert(`Supervisor ID: ${val[0]} Shopcode ID: ${val[1]}`);
})

 <select name="supervisor_ID shopcode_ID" id="supervisor_ID shopcode_ID">
     <option selected disabled>Select a supervisor</option>
     <option value="505:1">Mr. Supervisor 505</option>
     <option value="506:121">Mr. Supervisor 506</option>
     <option value="505:134">Mr. Supervisor 505</option>
 </select>

you can then use javascript to get the values.