<p>Вибери потрібне значення для <code>list-style-type</code>:</p>

<select id="form">
  <option>none</option>
  <option>inherit</option>
  <optgroup label="Рядок">
    <option>"Елемент..."</option>
    <option>"Пункт ->"</option>
  </optgroup>
  <optgroup label="Символи">
    <option>disc</option>
    <option>circle</option>
    <option>square</option>
    <option>disclosure-open</option>
    <option>disclosure-closed</option>
  </optgroup>
  <optgroup label="Алфавіт">
    <option>lower-alpha</option>
    <option>lower-latin</option>
    <option>upper-alpha</option>
    <option>upper-latin</option>
    <option>cjk-earthly-branch</option>
    <option>cjk-heavenly-stem</option>
    <option>lower-greek</option>
    <option>hiragana</option>
    <option>hiragana-iroha</option>
    <option>katakana</option>
    <option>katakana-iroha</option>
  </optgroup>
  <optgroup label="Числа">
    <option>decimal</option>
    <option>decimal-leading-zero</option>
    <option>arabic-indic</option>
    <option>armenian</option>
    <option>upper-armenian</option>
    <option>lower-armenian</option>
    <option>bengali</option>
    <option>cambodian</option>
    <option>khmer</option>
    <option>cjk-decimal</option>
    <option>devanagari</option>
    <option>georgian</option>
    <option>gujarati</option>
    <option>gurmukhi</option>
    <option>hebrew</option>
    <option>kannada</option>
    <option>lao</option>
    <option>malayalam</option>
    <option>mongolian</option>
    <option>myanmar</option>
    <option>oriya</option>
    <option>persian</option>
    <option>lower-roman</option>
    <option>upper-roman</option>
    <option>tamil</option>
    <option>telugu</option>
    <option>thai</option>
    <option>tibetan</option>
  </optgroup>
</select>

<p id="text"></p>

<hr>

<ul id="block">
  <li>Це елемент один</li>
  <li>Це елемент два</li>
  <li>Це елемент три</li>
</ul>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  padding: 56px 0 0 150px;
  font-size: 18px;
  color: #222;
  text-align: left;
}

var block = document.getElementById('block');
var form = document.getElementById('form');

form.onchange = function change() {
  
  var newVal = getNewValue();  
  block.style.listStyleType = newVal;
  
}

function getNewValue() {
  
  var result = '';
  
  for (var i = 0; i < form.options.length; i++) {
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }
  
  return result;
  
}