Pass data between select

Asked

Viewed 66 times

-3

I’m trying to get the dice selected on a select múltiple can pass to the other select by clicking the button >>, but I can’t. Is there any HTML5 functionality that can solve this ?

inserir a descrição da imagem aqui

<select multiple="multiple">
    	<optgroup label="Manhã">
    		<option>07:00 - 08:00</option>
    		<option>08:00 - 09:00</option>
    		<option>09:00 - 10:00</option>
    		<option>10:00 - 11:00</option>
    		<option>11:00 - 12:00</option>
    	</optgroup>
    	<optgroup label="Tarde">
    		<option>12:00 - 13:00</option>
    		<option>13:00 - 14:00</option>
    		<option>14:00 - 15:00</option>
    		<option>15:00 - 16:00</option>
    		<option>16:00 - 17:00</option>
    		<option>17:00 - 18:00</option>
    	</optgroup>
    </select>
    
    <input type="submit" value=">>">
    
    <select multiple="multiple">
    	
    </select>

javascript html5 html-select

  • You will have to use javascript for this, have you done something? If yes post your code

  • @Andersonhenrique not only made the html that is showing in the image :/

  • Post your HTML too, it’s easier to make the example more realistic

  • @Andersonhenrique made !

  • great, easy there

1 answer

1


Follow the desired functionality, I basically changed the type button input for button, because you’re not submitting anything, so it doesn’t need to be of the type Submit, right after that I set id’s for their selects a I called leftBox and the other of rightBox, then added a onClick on the button calling the function appendSelect javascript, this function will take what you selected in the left box and insert in the right box using the innerHTML. Note that in innerHTML I concateno "+=" to take the previous and add with the new items

Edit

Observing better your question saw that you want to remove from one and pass to the other,for that the same method from above will be used the only difference is that we remove from the selectedIndex from the left box, after inserting into the right box using the remove

function appendSelect(){
  const leftBox = document.getElementById('leftBox')
  const rightBox = document.getElementById('rightBox');
  rightBox.innerHTML += `<option>${leftBox.value}</option>`;
  const selected = leftBox.options.selectedIndex;
  leftBox.remove(selected)
}
<select multiple="multiple" id='leftBox'>
    	<optgroup label="Manhã">
    		<option>07:00 - 08:00</option>
    		<option>08:00 - 09:00</option>
    		<option>09:00 - 10:00</option>
    		<option>10:00 - 11:00</option>
    		<option>11:00 - 12:00</option>
    	</optgroup>
    	<optgroup label="Tarde">
    		<option>12:00 - 13:00</option>
    		<option>13:00 - 14:00</option>
    		<option>14:00 - 15:00</option>
    		<option>15:00 - 16:00</option>
    		<option>16:00 - 17:00</option>
    		<option>17:00 - 18:00</option>
    	</optgroup>
    </select>
    
    <button onClick="appendSelect()">>></button>
    
    <select multiple="multiple" id='rightBox'>
    	
    </select>

Browser other questions tagged javascript html5 html-select

You are not signed in. Login or sign up in order to post.