Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree2Likes
  • 1 Post By Ronald Roe
  • 1 Post By Ronald Roe

Thread: js and select

  1. #1
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times

    js and select

    first off, I don't have any code for you's to look at, I only have one question. that is...

    how can javascript clear the options in a select element?

    I have seen it done on a tutorial, but after sending 1 hr++ trying to find it I had no luck.

    the basic Idea I have is that there are 2 select menu's, when someone selects menu 1 option one, it loads up a specific set of options for the second select menu, now, if a user clicks menu one option one but realises he actually wanted menu 1 option 2, I need to clear the options loaded by menu 1 option 1 and then load menu one option 2 into the second select menu

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    In that case, you'll have to replace the innerHTML and unset the value of the second select element. There are several ways to do that, and how you go about it will depend on where the data comes from.

    Unsetting the value of the select is as easy as:

    HTML Code:
    let sel2 = document.querySelector('.second_select');
    sel2.removeAttribute('value');
    How are you pulling in the data for the second select menu? Is it already on the page somewhere?
    busso likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    in the tutorial he was using js to add html elements to the select menu. the way he did it was so simple, I just cant find the f**king video, I think I'm gonna re watch all 8 hrs of the tutorial to find it lollollol

  5. #4
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    from what I remember it was something like this

    document.form1.option.select = 0;

    whatever way he did it I specifically remember him using a zero to clear the elements within the select field

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Ok, so forms are loaded into an array in the DOM under the document object.

    So, you can get at a form by calling its index: document.forms[0] will return the first form in the DOM. From there, you can go further to elements. document.forms[0].elements will return all of the child elements of the first form. Then, you just select the element you want, again using its index. So, if the second select is the second element, you would select it with document.forms[0].elements[1]. And then, you can set its value to 0 with document.forms[0].elements[1].value = 0;

    Man, that sure is cumbersome. And what if you have to add an element or another form later? You'll have to refactor all of those indexes to match. And then, that does nothing about the actual options in the second select. They're still all the same. Also, setting the value to 0 still gives it a value, which can cause unintended data to be sent if the user clicks Submit without actually choosing an option.

    There are better ways. The way I posted above will clear the value so that the select doesn't have one, which is how the select will be when the page loads initially.

    As far as changing the options in the select, again there are multiple ways, and the "right" way depends on how you're bringing in the new options. For most cases, I would personally change the innerHTML of the select by having the JavaScript replace what's in there with a template literal.
    busso likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    your way does look a lot better now that I think about it. theres a lot more to js than I expected but its very interesting, thanks

  8. #7
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    can you shed a bit more light on why you would use a template literal instead of just changing it using innerHTML with a string value?

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by busso View Post
    can you shed a bit more light on why you would use a template literal instead of just changing it using innerHTML with a string value?
    Because, you could just use one template. So, let's say you set the value of the items in the first select as a number. You could use that number to find an array index. So, you could store the second select's data in objects in an array. Then, interpolate the data into the template and output it.

    Example:

    Code:
    // This is our data
    let data = [
    {select1: "car", select2: "boat", select3: "plane"},
    {select1: "walk", select2: "skip", select3: "run"},
    {select1: "jump", select2: "crouch", select3: "slide"}
    ];
    Then, add the event listener and make the swap. We'll put the template inside the event listener for now. It isn't the best way, but it'll work for what we're doing. It'll make it just a bit easier to see what's going on. The best way would be to create a function and return it, then call that function in the change event. This is easier for now.

    Code:
    let sel1 = document.querySelector('.sel1'); // The first select element
    let sel2 = document.querySelector('.sel2'); // The second select element
    
    sel1.addEventListener('change', function(){
    
      let num = parseInt(sel1.value) - 1;
      
      let template = `<option value = "1">${data[num].select1}</option>
      <option value = "2">${data[num].select2}</option>
      <option value = "3">${data[num].select3}</option>`;
    
      sel2.innerHTML = template;
      
      sel2.value = false;
    
    });
    See the working code here: A Pen by Ronald Roe

    Also, I was wrong earlier about setting the value. Apparently, when you remove the value, the element automatically takes the value of the text of the first option. I set it to false and got the intended no value. It'll pass as an empty string, which you can test server-side, and will be considered false.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:16 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com