Select the partial to load in dropdown select option with jQuery

support
1

I have a form with a dropdown select with a few options:

<select id="cat_selection">
    <option value="{{ partial "car.html" . }}">Car</option>
    <option value="{{ partial "bike.html" . }}">Bike</option>
    <option value="{{ partial "truck.html" . }}">Truck</option>
</select>

Each selection uses JQuery:

<script>
 $(document).ready(function(){
      $('#cat_selection').on('change', function(){
            var catvalue = $(this).val(); 
        document.getElementById('myselect').innerHTML = catvalue;
</script>

to load the corresponding partial - one of these:

car.html
bike.html
truck.html

into the div:

<div id="myselect"></div>

It works, but loads only string, if there is any in the partial, omitting all html code.
Why it happens and can this method be used to load the partial including the html code?

Thanks!

P.S. I definitely know that Hugo is a static site generator, etc.

2

You can use the safeHTMLAttr for this.

<select id="cat_selection">
    <option value="{{ partial "car.html" . | safeHTMLAttr }}">Car</option>
    <option value="{{ partial "bike.html" . | safeHTMLAttr }}">Bike</option>
    <option value="{{ partial "truck.html" . | safeHTMLAttr }}">Truck</option>
</select>
3

Thank you!

4

I could not repeat your success.
SafeHtml made it worse.
Without safeHtml it outputs only string, discards all html code.

5

You may using a wrong function, please use safeHTMLAttr.

6 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Select the partial to load in dropdown select option with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<select id="cat_selection">
	<option>Select vehicle</option>
	<option value='{{ partial "car.html" . }}'>Car</option>
	<option value='{{ partial "bike.html" . }}'>Bike</option>
	<option value='{{ partial "truck.html" . }}'>Truck</option>
</select>

<h1>This is the value in the div:</h1>

<div id="midsect" class=""></div>

<script type="text/javascript">
 $(document).ready(function(){
      $('#cat_selection').on('change', function(){
         var catvalue = $(this).val();
         document.getElementById('midsect').innerHTML = catvalue;
		});
	});
</script>

</body>
</html>