retornar valor selecionado

[Biel. 9]

Olá pessoal. Direto ao ponto. O código abaixo retorna todos os items. Gostaria que retornasse somente os itens que forem selecionados.

<form>
  <select id="id_select" multiple size="9" required>
    <option>item_1</option>
    <option>item_2</option>
    <option>item_3</option>
    <option>item_4</option>
    <option>item_5</option>
  </select>
</form>

<button onclick="aprendiz()">click</button>

<p id="id_p"></p>

<script>
function aprendiz() {
  var x = document.getElementById("id_select");
  var txt = "";
  var i;
  for (i = 0; i < x.length; i++) {
    txt = txt + x.options[i].text + "<br>";
  }
  
  document.getElementById("id_p").innerHTML = txt;
}
</script>

 

[Jack Oliveira 1]

10 minutos atrás, Biel. disse:

Olá pessoal. Direto ao ponto. O código abaixo está funcionando, mas não exibe na tela os valores que foram selecionados. Gostaria que exibisse na tela os valores selecionados

<select name="CARROS_e_CORES" id="id_select"  size="6" multiple  >
     <option value="fiat" >fiat</option>
     <option value="corsa" >corsa</option>
     <option value="palio" >palio</option>
     <option value="blue" >blue</option>
     <option value="green" >green</option>
     <option value="white" >white</option>
</select>

<hr>

<button onclick="funcTeste()">ok</button>

<p id="id_p"></p>

<script>
function funcTeste(){
  var x = document.getElementById("id_select").value;
  document.getElementById("id_p").innerHTML = x;
}
</script>

 

Tente assim

 

<script>
function funcTeste(){
var modelo_e_cores = palio; document.getElementById('id_select').value = modelo_e_cores;

 /*var x = document.getElementById("id_select").value;*/
  document.getElementById("id_p").innerHTML = x;
}
</script>

Ou pode fazer com PHP

 

// Seleciona o option
    function Selected($query, $value = null){
        if ($query == $value) { echo "selected"; }
    }

<?php $QueryCarros = DBRead('carros','*',"WHERE id >0"); if (is_array($QueryCarros)) { foreach ($QueryCarros as $dados) { ?>
<select  class="form-control" name="modelos_cores">
     <option value="fiat" <?php Selected($dados['modelos_cores'],'fiat'); ?>>Fiat</option>
     <option value="corsa" <?php Selected($dados['modelos_cores'],'corsa'); ?>>Corsa</option>
     <option value="palio" <?php Selected($dados['modelos_cores'],'palio'); ?>>Palio</option>
     <option value="blue" <?php Selected($dados['modelos_cores'],'blue'); ?>>Blue</option>
     <option value="green" <?php Selected($dados['modelos_cores'],'green'); ?>>Green</option>
     <option value="white" <?php Selected($dados['modelos_cores'],'white'); ?>>White</option>
</select>
<?php }} ?>

Espero que tenha ajudado

[wanderval 19]

Acredito que faltou apenas a validação!

function aprendiz() {
  var x = document.getElementById("id_select");
  var txt = "";
  var i;
  
  for (i = 0; i < x.length; i++) {
    if(x.options[i].selected) {
      txt = txt + x.options[i].text + "<br>";
    }
  }
  
  document.getElementById("id_p").innerHTML = txt;
}

Test Jsbin: https://jsbin.com/tegacigole/edit?html,js,output

[Biel. 9]

Wanderval, muito obrigado. Tarefa resolvida.