在选择上注册onchange和onclick时，两次触发click事件

Question

Goal: Have a select whose option have nested structure when user clicks on the select , but when user selects an option the option should be displayed "normally" (ie with no leading spaces).

Attempted solution using JS and Jquery: My JS is far from sophisticated so I apologize in advance :)

I attempted to use .on("change") and . on("click") to change the selected option value (by calling .trim() since I achieve the "nested" structure with   ). I'm also storing the original value of the selected option because I want to revert the select menu to its original structure in case the user selects another option .

The problem : The function registered for .on("click") is called twice, thus the select value immediately resets itself to its original value.

I suspect there is a much, much easier solution using CSS. I will be happy to accept an answer that will suggest such solution.

JSFiddle: https://jsfiddle.net/dv6kky43/9/

<form>
  <select id="select">
    <option value=""></option>
    <option value="a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a</option>
    <option value="b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b</option>
  </select>
</form>
<textarea id="output"/>

var orig;
var output = $("#output");
output.val("");

function onDeviceSelection(event){
  output.val(output.val() + "\nonDeviceSelection");
  var select = event.target;
  orig = select.selectedOptions[0].text;
  select.selectedOptions[0].text = select.selectedOptions[0].text.trim()

}

function resetDeviceSelectionText(event) {
  output.val(output.val() + "\nresetDeviceSelectionText");
  var select = event.target;
  if (orig !== undefined){
    select.selectedOptions[0].text = orig;
  }
}

$("#select").on("change", onDeviceSelection);
$("#select").on("click", resetDeviceSelectionText);

Answer 1

Instead of keeping the state of the selected element i would simply go over all options and add the space if that option is not selected:

function onDeviceSelection(event){
  // Update textarea
  output.val(output.val() + "\nonDeviceSelection");
  // Higlight the selected
  const {options, selectedIndex} = event.target;
  for(let i = 0; i < options.length; i++)
      options[i].innerHTML = (i === selectedIndex ? "":"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;") + options[i].text.trim();

}

$("#select").on("change", onDeviceSelection);

Note that you need to use innerHTML to set the whitespace...

Answer 2

If you are already using jQuery, why not utilize data function to store the original value. This way you will also be able to specify different nest levels.

 (function($){ $(document).on('change', 'select', function(event) { $(this).find('option').each(function(index, element){ var $option = $(element); // Storing original value in html5 friendly custom attribute. if(!$option.data('originalValue')) { $option.data('originalValue', $option.text()); } if($option.is(':selected')) { $option.html($option.data('originalValue').trim()); } else { $option.html($option.data('originalValue')); } }) }); })(jQuery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <select id="select"> <option value=""></option> <option value="a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a</option> <option value="b">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b</option> </select> </form> 

Once caveat I see is, the selected option will appear trimmed on the list as well, if dropdown is opened after a previous selection has been made:

Will it still work for you?