Drop-Down Select Lists Creator - Multiple Sets of Lists

[alfordfiles]

Hello - I am loving the multiple drop down select lists creator from: https://coursesweb.net/javascript/multip ... creator_s2 - and wondering if there is a way to use multiple calls to different slists on one page?

I need to have numerous "sets" of drop-down lists in our project. Each is configured as a separate "slist.txt" file, but will appear on the same page as others - and I can't get it to work.

I would appreciate any advice or guidance!

Hi
The Multiple Drop-Down Select Lists Creator script cannot be used to create multiple "sets" of SList for the same page because its instructions set and use Fixed IDs for the <select> list.
- To make it for multiple sets of SLists, all the JavaScript code of this script must be rebuilded to set and use dynamically IDs.

The simplest way is to add each "set" of select-lists in a html page, then use <iframe>s to include them into an one page.

- If God wants, I'll try to make a new version of this script with this feature to can use multiple sets of drop-down select lists in the same page.

Okay - that is pretty much the same conclusion I had come to, thank you so much for clarifying the issue. And I will take your advice on using the iFrames.

Please let me know if you do make a new version of this script - as it is exactly what I need, and I thank you so much!

I made a new version of this script. Changes:
- The text file with data for drop-down select lists has ".json" extension.
- You can add multiple "sets" of drop-down select lists in the same page.
- Method to change the text of the first option in the first pulldown Select.

Download again the script (for the link added in first post) and see how it works.

Oh I am so sorry but unfortunately, this still isn't working _ or maybe I am not understanding how it can?

I need a different select list "file" in different DIVs – so, because the DIV id "optioncnt" is the same in both, it won't work as needed?

Code: Select all

<div id="content-h-tab-1" class="responsive-tabs-panel">
  <div class="responsive-tab-title"></div>
  <h4>Forehead-Related Symptoms</h4><br>
  <form action="#" method="post">
  <span id="n_sl1" class="dslists"></span>
  <div id="optioncnt"></div>
  </form>
<script type="text/javascript">
obGSL.add1stSelect('file', 'slists/Forehead.txt');
</script>		

</div>
<div id="content-h-tab-2" class="responsive-tabs-panel">
  <div class="responsive-tab-title"></div>
  <h4>Eye-Related Symptoms</h4><br>
  <form action="#" method="post">
  <span id="n_sl1" class="dslists"></span>
  <div id="optioncnt"></div>
  </form>
<script type="text/javascript">
obGSL.add1stSelect('file', 'slists/Eyes.txt');
</script>			
</div>

The IDs structure and the function to start the script are completely changed in the new version. The files with select lists data must have the ".json" extension.
See the files for test added in the archive with the script (for example "test_multi_set_lists.html"), and the explanations in their code.
In you case, try this code:

Code: Select all

<div id="content-h-tab-1" class="responsive-tabs-panel">
  <div class="responsive-tab-title"></div>
  <h4>Forehead-Related Symptoms</h4><br>
  <form action="#" method="post">
  <span id="Forehead_sl1" class="dslists"></span>
  <div id="Forehead_opcnt" class="optioncnt"></div>
  </form>
</div>
<div id="content-h-tab-2" class="responsive-tabs-panel">
  <div class="responsive-tab-title"></div>
  <h4>Eye-Related Symptoms</h4><br>
  <form action="#" method="post">
  <span id="Eyes_sl1" class="dslists"></span>
  <div id="Eyes_opcnt" class="optioncnt"></div>
  </form>
</div>

<script type="text/javascript" src="setslists/getslists.js"></script>
<script type="text/javascript">
setObDSL('file', ['Forehead', 'Eyes']);
</script>