i want select list value in first list to display in next list

Question

I want the selected item in the first div to display in the textarea in another div. I wrote some code but its not working. Please help me out.

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>

score 0 · Answer 1 · answered Jun 20 '17 at 09:38

You haven't closed your 2 uppermost functions with a semi-colon; these seem to be the only errors as far as I can tell. Your code works fine. I commented out the alerts to show the working code (the alerts work but i find them somewhat annoying, you can comment them in again if you like).

Run the snippet to see..

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>

Is it ok but am using this code but its not working canot property onchange function error showing — purender, Jun 20 '17 at 09:56
Uncaught TypeError: Cannot set property 'onchange' of null at demo.php:43 that is the error — purender, Jun 20 '17 at 10:03
Declare len before the for loop. Also either set a default selected value using selected or check for null. If selected is undefined or null then either alert please select an option or select the first one.. (alert is better) — Rachel Gallen, Jun 20 '17 at 11:22
there's an answer here which explains checking for undefined/null https://stackoverflow.com/a/5101991/1675954 Also see https://stackoverflow.com/help/accepted-answer — Rachel Gallen, Jun 20 '17 at 11:51
Please accept the answer. Hover and click, it's not hard. See second link! — Rachel Gallen, Jun 20 '17 at 13:29

i want select list value in first list to display in next list

1 Answers1