2017-05-26 2 views
0

Je crée un formulaire où lorsque je sélectionne le nom de famille du produit, ses valeurs seront affichées dans une boîte (je ne sais pas ce que je devrais utiliser pour l'afficher) et la boîte ne peut pas être éditée (seulement).Comment afficher plusieurs valeurs sélectionnées dans une boîte?

-HTML

<select name="fnme" onchange="setText(this)" multiple> 
      <option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option> 
      <option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option> 
      <option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option> 
      <option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option> 
    </select> 
<td><textarea rows="10" cols="30" name="textBox" id="disabled" value=""/ disabled></textarea></td> 
</br> 
<p><input type="submit" value="Save"></p> 

-ASPCode

<% 
DIM fnm,element   
fnm=Split(Request("fnme"),"\n") 
FOR EACH element IN fnm 
Response.Write("<p>--qq-- " & trim(element) & " </p>") 
Next 
%> 

Pour l'instant j'utilise la zone de texte, mais encore un problème dans l'affichage beaucoup de valeur, il afficher sur une valeur sélectionnée.

-JS

<script> 
function setText(obj) { 
var val = obj.value; 
document.getElementById('textBox').value = val; 
} 
</script> 

Je veux savoir qu'il est possible d'afficher la valeur multiple?

+0

Où est le TexBox ayant l'ID de 'textBox'? –

+1

Faites simplement ceci: 'document.getElementById ('disabled'). Value + = val;' et vous avez terminé! –

+0

@DhavalMarthak cela fonctionne wahhh merci thankyou – Far

Répondre

0

Quand vous faites:

var val = obj.value; 

vous allez seulement pour obtenir la valeur de la première option sélectionnée, pas tous (sauf si vous utilisez quelque chose comme jQuery).

Et la barre oblique:

<textarea ... id="disabled" value=""/ disabled> 

ne vous aide pas non plus. Je suppose que c'est juste une erreur typographique.

function getMultiSelectValue(select) { 
 
    return [].reduce.call(select.options, function(values, option) { 
 
    option.selected? values.push(option.value) : null; 
 
    return values; 
 
    }, []); 
 
} 
 

 
function showValues(values){ 
 
    document.getElementById('ta').value = values.join('\n'); 
 
}
<select onchange="showValues(getMultiSelectValue(this))" multiple> 
 
    <option value="0">0 
 
    <option value="1">1 
 
    <option value="2">2 
 
</select> 
 
<textarea id="ta" rows="3" readonly></textarea>

+1

J'essaye ceci sur IE, cela n'a pas fonctionné mais cela fonctionne sur le chrome, merci pour cela j'apprends quelque chose de nouveau comme appeler deux fonction à la fois. J'essaie toujours de trouver comment travailler sur IE, Merci: D – Far

+1

Quelle version de IE ne fonctionne pas? Je sais que IE 8 n'aimait pas que les objets hôtes soient passés aux méthodes Array intégrées comme * this *, mais il devrait avoir un [* polyfill *] (https://developer.mozilla.org/en-US/docs/ Web/JavaScript/Référence/Global_Objects/Array/Reduce), cela ne devrait donc pas poser de problème. Je m'attendrais à ce que cela fonctionne dans IE 9+ (mais je ne peux pas tester cela pendant un certain temps). – RobG

+0

J'utilise IE 11 version, je vais essayer d'apprendre polyfill, merci – Far

0

Je pense que cela pourrait vous aider.

<html> 
 
<body> 
 

 
<form action="" name="tof"> 
 
<select name="fnme" onchange="setText(this)" multiple> 
 
      <option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option> 
 
      <option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option> 
 
      <option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option> 
 
      <option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option> 
 
</select> 
 
<textarea id="res" readOnly></textarea> 
 
</form> 
 

 
<p id="demo"></p> 
 

 
<script> 
 

 
function setText(ob){ 
 
    var selected_options = document.forms['tof']['fnme'].selectedOptions 
 
    var selected_options_values = [] 
 
    for(i=0; i<selected_options.length; i++){ 
 
    \t selected_options_values.push(selected_options[i].value) 
 
    } 
 
\t document.getElementById('res').value = selected_options_values.join('\n') 
 
} 
 
</script> 
 

 
</body> 
 
</html>

+0

cela ne fonctionne pas avec IE11, mais travailler sur google chrome :) Je cherche où nous pouvons utiliser sur IE11 – Far