我希望在第一个列表中选择列表值以显示在下一个列表中

Question

我希望第一个div中的选定项目显示在另一个div的textarea中。我写了一些代码，但它不起作用。请帮助我。

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

您还没有一个分号关闭了2个最上面的功能;据我所知，这些似乎是唯一的错误。你的代码工作正常。我注意到警报显示工作代码（警报工作，但我觉得他们有点烦人，如果你愿意，你可以再次发表评论）。

运行片断看..

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>