try select opt by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<map>Inserisce immagini mappa cliccabili in un documento
<option>Serve ad inserire una voce in un menu di selezione.
minImposta il valore numerico o temporale minimo per un elemento input
<i>Formatta il testo in corsivo/italico non enfatizzato
langSpecifica la lingua del contenuto di un elemento
animationDefinisce i parametri dell'animazione di un elemento o selettore

Users

Log in to search for users

Explore

Find inspiration

tabella delle matricole

conta caratteri online

INSERIMENTO IMMAGINI IN UN TESTO

image gattino siamese

Borsino politico

esercitazione4.html

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<select multiple=""  id="lists" name="attributi_list[]" class="form-control my-3" style="height: 300px;">
  <option selected value="68">value
  </option>
  <option value="57">type
  </option>
  <option value="52">title
  </option>
  <option value="56">target
  </option>
  <option value="51">src
  </option>
  <option value="63">size
  </option>
  <option value="67">selected
  </option>
  <option value="48">rowspan
  </option>
  <option value="62">required
  </option>
  <option value="55">rel
  </option>
  <option value="83">novalidate
  </option>
  <option value="50">name
  </option>
  <option value="61">multiple
  </option>
  <option value="82">method
  </option>
  <option value="71">media
  </option>
  <option value="70">hreflang
  </option>
  <option value="54">href
  </option>
  <option value="49">headers
  </option>
  <option value="89">formaction
  </option>
  <option value="64">form
  </option>
  <option value="76">for
  </option>
  <option value="81">enctype
  </option>
  <option value="53">download
  </option>
  <option value="60">disabled
  </option>
  <option value="88">dirname
  </option>
  <option value="69">crossorigin
  </option>
  <option value="47">colspan
  </option>
  <option value="87">checked
  </option>
  <option value="65">autofocus
  </option>
  <option value="80">autocomplete
  </option>
  <option value="79">action
  </option>
  <option value="78">accept-charset
  </option>
  <option value="86">accept
  </option>
  <option value="22">&lt;ul&gt;
  </option>
  <option value="20">&lt;u&gt;
  </option>
  <option value="44">&lt;tr&gt;
  </option>
  <option value="25">&lt;title&gt;
  </option>
  <option value="72">&lt;thead&gt;
  </option>
  <option value="46">&lt;th&gt;
  </option>
  <option value="74">&lt;tfoot&gt;
  </option>
  <option value="45">&lt;td&gt;
  </option>
  <option value="73">&lt;tbody&gt;
  </option>
  <option value="43">&lt;table&gt;
  </option>
  <option value="18">&lt;strong&gt;
  </option>
  <option value="59">&lt;select&gt;
  </option>
  <option value="38">&lt;q&gt;
  </option>
  <option value="36">&lt;pre&gt;
  </option>
  <option value="11">&lt;p&gt;
  </option>
  <option value="66">&lt;option&gt;
  </option>
  <option value="23">&lt;ol&gt;
  </option>
  <option value="28">&lt;nav&gt;
  </option>
  <option value="35">&lt;meta&gt;
  </option>
  <option value="40">&lt;map&gt;
  </option>
  <option value="58">&lt;link&gt;
  </option>
  <option value="24">&lt;li&gt;
  </option>
  <option value="75">&lt;label&gt;
  </option>
  <option value="85">&lt;input&gt;
  </option>
  <option value="10">&lt;iframe&gt;
  </option>
  <option value="16">&lt;i&gt;
  </option>
  <option value="1">&lt;html&gt;
  </option>
  <option value="21">&lt;hr&gt;
  </option>
  <option value="13">&lt;head&gt;
  </option>
  <option value="34">&lt;h6&gt;
  </option>
  <option value="33">&lt;h5&gt;
  </option>
  <option value="32">&lt;h4&gt;
  </option>
  <option value="31">&lt;h3&gt;
  </option>
  <option value="30">&lt;h2&gt;
  </option>
  <option value="29">&lt;h1&gt;
  </option>
  <option value="84">&lt;form&gt;
  </option>
  <option value="15">&lt;em&gt;
  </option>
  <option value="14">&lt;div&gt;
  </option>
  <option value="77">&lt;datalist&gt;
  </option>
  <option value="27">&lt;cite&gt;
  </option>
  <option value="42">&lt;caption&gt;
  </option>
  <option value="19">&lt;br&gt;
  </option>
  <option value="12">&lt;body&gt;
  </option>
  <option value="39">&lt;blockquote&gt;
  </option>
  <option value="41">&lt;base&gt;
  </option>
  <option value="17">&lt;b&gt;
  </option>
  <option value="37">&lt;address&gt;
  </option>
  <option value="26">&lt;abbr&gt;
  </option>
  <option value="9">&lt;a&gt;
  </option>
  <option value="8">&lt;!doctype&gt;
  </option>
  <option value="5">&lt;!-- --&gt;
  </option>        
</select>
<div id="selected">
  
</div>

*{ }

var list = document.getElementById("lists");
var listOf = document.getElementById("selected");
var opt = list.getElementsByTagName("option");


list.addEventListener("click", function(){
  let count = 0;
  let alltags = "";
  listOf.innerHTML = "";
  for(i=0; i< opt.length; i++){ 
    if(opt[i].selected == true){
      let tag;
      tag = htmltoString(opt[i].innerHTML);
      alltags += "<span>" + tag + "</span> ";
      count++;
    }
  }
  listOf.innerHTML = alltags + " (Tot:"+count+")";
})

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
} 
function htmltoString(str) {
    return String(str).replace(/(<([^>]+)>)/gi, "");
}