Loaded HTML drop-down menus have selected field recognized, but not value field?

Question

I have the following code to manage some drop-down menu content that can change based on a textbox (include_Ts) setting.:-

    <div class="top">
        <strong><font size="2">Include latest T-builds:</font></strong> <input type="checkbox" id="include_Ts"/>
    <br><br>
    <label><strong><font size="2">Release #1:</font></strong></label>
    <select id="selectedBaseRelease">
        <script>
            $("#selectedBaseRelease").load("/~html/BaseReleaseMenuNoTs.html");
            document.querySelector("#include_Ts").addEventListener("change", function(event) {
                if (document.getElementById("include_Ts").checked === true) {
                    $("#selectedBaseRelease").load("/~html/BaseReleaseMenuWithTs.html");
                } else {
                    $("#selectedBaseRelease").load("/~html/BaseReleaseMenuNoTs.html");
                }
            });
            var currentBaseValue = $("#selectedBaseRelease").val();
            loadbaseText(currentBaseValue);
        </script>
    </select>

Here is what the loaded HTML files look like...

        <option value="/~releases/K-2015.06/K-2015.06-SP5.AppOps.public">ICC2_K-2015.06-SP5</option>
        <option value="/~releases/K-2015.06/K-2015.06-SP4.AppOps.public">ICC2_K-2015.06-SP4</option>
        <option value="/~releases/K-2015.06/K-2015.06-SP3.AppOps.public">ICC2_K-2015.06-SP3</option>
        <option value="/~releases/K-2015.06/K-2015.06-SP2.AppOps.public">ICC2_K-2015.06-SP2</option>
        <option value="/~releases/K-2015.06/K-2015.06-SP1.AppOps.public">ICC2_K-2015.06-SP1</option>
        <option value="/~releases/K-2015.06/K-2015.06.AppOps.public" selected >ICC2_K-2015.06</option>

Once the HTML files are loaded, the default selected option is properly displayed in the drop-down, which is great. What is throwing me off, however, is that...

$("#selectedBaseRelease").val()

...is always null. In the above example, I am expecting it to be...

/~releases/K-2015.06/K-2015.06.AppOps.public

Why is JS understanding the selected field in the *.html file, but not the value field?

Thanks!

Your answer is here: https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown — Marc, Aug 24 '18 at 16:20
How are you changing the dropdown? The `change` event doesn't fire when you change it with JavaScript, only when it's changed by the user. — Barmar, Aug 24 '18 at 16:25
@Marc There's lots of bad information at that question. `.val()` works for ` — Barmar, Aug 24 '18 at 16:26
@Barmar yes, that is correct--I want the change event to be user-initiated. Basically, when the include_Ts checkbox is selected or deselected, a different pull-down set of selections will become visible. All of that is working fine, but I really need the $("#selectedBaseRelease").val() to be populated with the value (which is a pointer to a file). — Chris, Aug 24 '18 at 16:43
The line `var currentBaseValue = $("#selectedBaseRelease").val();` is not inside the `change` event handler, so it doesn't get the changed value. — Barmar, Aug 24 '18 at 16:49
@Barmar, yeah, I know--that var declaration has jumped in and out of the event handler during the debug process, but it always ends up null no matter where it is. Interestingly, Marc pointed to a post that recommended
var currentBaseValue = $('#selectedBaseRelease').find(':selected').text(); but that ended up loading the whole page into a text area that loadbaseText populates. — Chris, Aug 24 '18 at 16:55
Since you're loading the options asynchronously with AJAX, you're trying to get the value before there are any options at all. The code makes no sense. — Barmar, Aug 24 '18 at 16:57
@Barmar your posted answer is perfect! I see what I was doing wrong. This is the first time I have tried to employ variable drop-down menu lists. Everything looks good now! — Chris, Aug 24 '18 at 17:15

score 0 · Accepted Answer · answered Aug 24 '18 at 17:02

You're loading the options with AJAX, which is asynchronous. At the time that you set the currentBaseValue variable, it hasn't been loaded yet. You need to do that in the .load() callback function.

var currentBaseValue;
$("#selectedBaseRelease").load("/~html/BaseReleaseMenuNoTs.html", function() {
  currentBaseValue = $(this).val();
  loadbaseText(currentBaseValue);
});
document.querySelector("#include_Ts").addEventListener("change", function(event) {
  if (document.getElementById("include_Ts").checked === true) {
    $("#selectedBaseRelease").load("/~html/BaseReleaseMenuWithTs.html", function() {
      currentBaseValue = $(this).val();
      loadbaseText(currentBaseValue);
    });
  } else {
    $("#selectedBaseRelease").load("/~html/BaseReleaseMenuNoTs.html", function() {
      currentBaseValue = $(this).val();
      loadbaseText(currentBaseValue);
    });
  }
});

Loaded HTML drop-down menus have selected field recognized, but not value field?

1 Answers1