Ich möchte den Listenwert in der ersten Liste auswählen, um ihn in der nächsten Liste anzuzeigen.

Question

Ich möchte, dass das ausgewählte Element im ersten div im Textfeld in einem anderen div angezeigt wird. Ich habe einen Code geschrieben, aber es funktioniert nicht. Bitte hilf mir.

function getSelectedOptions(sel, fn) { 
 
    alert("hjgh"); 
 
    var opts = [], 
 
    opt; 
 

 
    // loop through options in select list 
 
    for (var i = 0, len = sel.options.length; i < len; i++) { 
 
    opt = sel.options[i]; 
 

 
    // check if selected 
 
    if (opt.selected) { 
 
     // add to array of option elements to return from this function 
 
     opts.push(opt); 
 

 
     // invoke optional callback function if provided 
 
     if (fn) { 
 
     fn(opt); 
 
     } 
 
    } 
 
    } 
 

 
    // return array containing references to selected option elements 
 
    return opts; 
 
} 
 

 
function callback(opt) { 
 
    alert("tfh"); 
 
    // display in textarea for this example 
 
    var display = document.getElementById('display'); 
 
    display.innerHTML += opt.value + ', '; 
 

 
    // can access properties of opt, such as... 
 
    //alert(opt.value) 
 
    //alert(opt.text) 
 
    //alert(opt.form) 
 
} 
 

 
// anonymous function onchange for select list with id demoSel 
 
document.getElementById('demoSel').onchange = function(e) { 
 
    alert("ghghg"); 
 
    // get reference to display textarea 
 
    var display = document.getElementById('display'); 
 
    display.innerHTML = ''; // reset 
 

 
    // callback fn handles selected options 
 
    getSelectedOptions(this, callback); 
 

 
    // remove ', ' at end of string 
 
    var str = display.innerHTML.slice(0, -2); 
 
    display.innerHTML = str; 
 
}; 
 

 
document.getElementById('demoForm').onsubmit = function(e) { 
 
    alert('hhj'); 
 
    // reference to select list using this keyword and form elements collection 
 
    // no callback function used this time 
 
    var opts = getSelectedOptions(this.elements['demoSel[]']); 
 

 
    alert('The number of options selected is: ' + opts.length); // number of selected options 
 

 
    return false; // don't return online form 
 
};

<div class="container"> 
 
    <div class="row"> 
 
    <form action="#" method="post" id="demoForm" class="demoForm"> 
 
     <fieldset> 
 
     <legend>Demo: Get Selected Options</legend> 
 

 
     <p> 
 
      <select name="demoSel[]" id="demoSel" size="4" multiple> 
 
         <option value="scroll">Scrolling Divs JavaScript</option> 
 
         <option value="tooltip">JavaScript Tooltips</option> 
 
         <option value="con_scroll">Continuous Scroller</option> 
 
         <option value="banner">Rotating Banner JavaScript</option> 
 
         <option value="random_img">Random Image PHP</option> 
 
         <option value="form_builder">PHP Form Generator</option> 
 
         <option value="table_class">PHP Table Class</option> 
 
         <option value="order_forms">PHP Order Forms</option> 
 
        </select> 
 
      <input type="submit" value="Submit" /> 
 
      <textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea> 
 
     </p> 
 

 
     </fieldset> 
 
    </form> 
 
    </div> 
 
</div>

Answer 1

Sie haben die 2 obersten Funktionen mit einem Semikolon nicht geschlossen; Diese scheinen die einzigen Fehler zu sein, soweit ich das beurteilen kann. Dein Code funktioniert einwandfrei. Ich habe die Warnungen auskommentiert, um den Arbeitscode anzuzeigen (die Warnungen funktionieren, aber ich finde sie etwas nervig, Sie können sie wieder kommentieren, wenn Sie möchten).

Führen Sie den Code-Schnipsel zu sehen ..

function getSelectedOptions(sel, fn) { 
 
// alert("hjgh"); 
 
    var opts = [], 
 
    opt; 
 

 
    // loop through options in select list 
 
    for (var i = 0, len = sel.options.length; i < len; i++) { 
 
    opt = sel.options[i]; 
 

 
    // check if selected 
 
    if (opt.selected) { 
 
     // add to array of option elements to return from this function 
 
     opts.push(opt); 
 

 
     // invoke optional callback function if provided 
 
     if (fn) { 
 
     fn(opt); 
 
     } 
 
    } 
 
    } 
 

 
    // return array containing references to selected option elements 
 
    return opts; 
 
}; 
 

 
function callback(opt) { 
 
//alert("tfh"); 
 
    // display in textarea for this example 
 
    var display = document.getElementById('display'); 
 
    display.innerHTML += opt.value + ', '; 
 

 
    // can access properties of opt, such as... 
 
    //alert(opt.value) 
 
    //alert(opt.text) 
 
    //alert(opt.form) 
 
}; 
 

 

 
// anonymous function onchange for select list with id demoSel 
 
document.getElementById('demoSel').onchange = function(e) { 
 
//alert("ghghg"); 
 
    // get reference to display textarea 
 
    var display = document.getElementById('display'); 
 
    display.innerHTML = ''; // reset 
 

 
    // callback fn handles selected options 
 
    getSelectedOptions(this, callback); 
 

 
    // remove ', ' at end of string 
 
    var str = display.innerHTML.slice(0, -2); 
 
    display.innerHTML = str; 
 
}; 
 

 
document.getElementById('demoForm').onsubmit = function(e) { 
 
    //alert('hhj'); 
 
    // reference to select list using this keyword and form elements collection 
 
    // no callback function used this time 
 
    var opts = getSelectedOptions(this.elements['demoSel[]']); 
 

 
    alert('The number of options selected is: ' + opts.length); // number of selected options 
 

 
    return false; // don't return online form 
 
};

<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <form action="#" method="post" id="demoForm" class="demoForm"> 
 
     <fieldset> 
 
      <legend>Demo: Get Selected Options</legend> 
 

 
      <p> 
 
      <select name="demoSel[]" id="demoSel" size="4" multiple> 
 
        <option value="scroll">Scrolling Divs JavaScript</option> 
 
        <option value="tooltip">JavaScript Tooltips</option> 
 
        <option value="con_scroll">Continuous Scroller</option> 
 
        <option value="banner">Rotating Banner JavaScript</option> 
 
        <option value="random_img">Random Image PHP</option> 
 
        <option value="form_builder">PHP Form Generator</option> 
 
        <option value="table_class">PHP Table Class</option> 
 
        <option value="order_forms">PHP Order Forms</option> 
 
       </select> 
 
      <input type="submit" value="Submit" /> 
 
      <textarea name="display" id="display" placeholder="view select list value(s) onchange" cols="20" rows="4" readonly></textarea> 
 
      </p> 
 

 
     </fieldset> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</body>