javascript - Cascading Combo box HTML - Stack Overflow

admin管理员组

文章数量:1432178

I am not really a web person and am having trouble creating a cascading bo box. I have my options, but when I cannot figure out how to do a JavaScript mand to switch the second box depending on the first box's selection.

These are my first set of options:

<select id="searchType" onchange="selectedOption(this)">
  <option value="sessions">Sessions</option>
  <option value="files">Files</option>
  <option value="clients">Clients</option>
</select>

Depending on what they click there I would like to show these set of options:

SESSIONS

<select id="secondOptions">
   <option value="conf">Config ID</option>
   <option value="length">Length</option>
   <option value="date">Date</option>
</select>

FILES

<select id="secondOptions">
       <option value="id">File ID</option>
       <option value="length">Length</option>
       <option value="sent">Sent</option>
       <option value="sessionId">Session ID</option>
</select>

CLIENTS

<select id="secondOptions">
       <option value="name">Client Name</option>
       <option value="organization">Organization</option>
       <option value="specialty">Specialty</option>
       <option value="sessionId">Session ID</option>
</select>

And finally a textbox to type into to really specify the search. Once again, I am trying to do this using JavaScript, but if there is a better way to do this let me know please.

I am not really a web person and am having trouble creating a cascading bo box. I have my options, but when I cannot figure out how to do a JavaScript mand to switch the second box depending on the first box's selection.

These are my first set of options:

<select id="searchType" onchange="selectedOption(this)">
  <option value="sessions">Sessions</option>
  <option value="files">Files</option>
  <option value="clients">Clients</option>
</select>

Depending on what they click there I would like to show these set of options:

SESSIONS

<select id="secondOptions">
   <option value="conf">Config ID</option>
   <option value="length">Length</option>
   <option value="date">Date</option>
</select>

FILES

<select id="secondOptions">
       <option value="id">File ID</option>
       <option value="length">Length</option>
       <option value="sent">Sent</option>
       <option value="sessionId">Session ID</option>
</select>

CLIENTS

<select id="secondOptions">
       <option value="name">Client Name</option>
       <option value="organization">Organization</option>
       <option value="specialty">Specialty</option>
       <option value="sessionId">Session ID</option>
</select>

And finally a textbox to type into to really specify the search. Once again, I am trying to do this using JavaScript, but if there is a better way to do this let me know please.

• javascript
• html
• drop-down-menu

Share Improve this question Follow edited May 18, 2012 at 17:14 kapa 78.8k2121 gold badges165165 silver badges178178 bronze badges asked Aug 16, 2011 at 22:03 Solid1Snake1Solid1Snake1 27211 gold badge66 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Given the amended html mark-up:

<form action="#" method="post">
    <select id="searchType">
        <option value="sessions">Sessions</option>
        <option value="files">Files</option>
        <option value="clients">Clients</option>
    </select>

    <select id="sessions">
        <option value="conf">Config ID</option>
        <option value="length">Length</option>
        <option value="date">Date</option>
    </select>

    <select id="files">
        <option value="id">File ID</option>
        <option value="length">Length</option>
        <option value="sent">Sent</option>
        <option value="sessionId">Session ID</option>
    </select>

    <select id="clients">
        <option value="name">Client Name</option>
        <option value="organization">Organization</option>
        <option value="specialty">Specialty</option>
        <option value="sessionId">Session ID</option>
    </select>

    <fieldset id="textAreaSearchBox">
        <legend>Search:</legend>
        <textarea></textarea>
    </fieldset>
</form>

(Note the changed ids, wrapping the form elements in a form, the addition of a fieldset, legend and textarea in the mark-up), the following JavaScript seems to work:

var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');

select1.onchange = function() {
    var select2 = this.value.toLowerCase();
    for (i = 0; i < selects.length; i++) {
        if (selects[i].id != this.id) {
            selects[i].style.display = 'none';
        }
    }
    document.getElementById(select2).style.display = 'block';
    document.getElementById('textAreaSearchBox').style.display = 'block';
};

JS Fiddle demo.

本文标签： javascriptCascading Combo box HTMLStack Overflow