次のリストに表示する最初のリストのリスト値を選択したい

Question

最初のdivの選択したアイテムを別のdivのテキストエリアに表示したい。私はいくつかのコードを書いたが、動作していない。私を助けてください。

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>