Populate input field based no choice from dropdown in Spotfire

Question

I want to make a general template in the data visualization software Spotfire. I have generated a dropdown and an input field using Spotfire. I want to populate the input field based on the choice from the dropdown. For example if "Option 1" was chosen in the dropdown, I want the input field to say "Option 1 was chosen". I wanted to achieve this with Javascript, but I have very limited experience with Javascript.

I have the following HTML code for the textarea in Spotfire:

<P><span id="dropdown"><SpotfireControl id="d488e97a39b74c64859a5fc459d93799" /></P></span>
<P><span id="inputfield"><SpotfireControl id="3aa11129b29b495596cbe4e69d133fac" /></P></span>

In the "Edit HTML" window in spotfire inserted the following javascript under the name "populateInputField":

function populateInputField() {
    // Get the input field value
    var inputField = $("#inputfield > input").first();

    // Get the selected value from the dropdown
    var selectedValue = $("#dropdown .ComboBoxTextDivContainer div").text();

    // Populate the input field based on the selected value
    if (selectedValue == "Option 1") {
      inputField.val() = "Option was chosen";
    } else if (selectedValue == "Option 2") {
      inputField.val() = "Option 2 was chosen";
    }
  }

$("#glycanDropDown .ComboBoxTextDivContainer div").on("change", populateInputField);

I don't receive any error messages from Spotfire, but it also does not do what I want. I think the main issue is that there is no clear way from Spotfire on how to reference their dropdown and input field.

Edit: Finally got it to work. The main issue was how to access the multiline input field from spotfire in Javascript. Below is the code that worked for me.

HTML:

<P><FONT size=2>Which Glycans should be summed up?</FONT></P>
<P><span id="dropDown"><SpotfireControl id="d488e97a39b74c64859a5fc459d93799" /></P></span>
<P><span id="inputField"><SpotfireControl id="3aa11129b29b495596cbe4e69d133fac" /></P></span>

Javascript:

var dropdownId = "dropDown"

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

//function when dropdown value changes
var dropdownchange = function(newValue){
    if (newValue == "One") {
        textinput = "One was chosen"
        $("#inputField textarea").text(textinput).focus().blur()
    } else if (newValue == "Two") {
        textinput = "Two was chosen"
        $("#inputField textarea").text(textinput).focus().blur()
    }
}

// get initial value in the dropdown
var target = document.getElementById(dropdownId)
var oldVal = target.innerText.trim()

//callback is the function to trigger when target changes
var callback = function(mutations) {
    newVal=$('#'+dropdownId+' .ComboBoxTextDivContainer').text()
    if(newVal!=oldVal) dropdownchange(newVal)
    oldVal = newVal;
}

//this is to glue the two functions together
var observer = new MutationObserver(callback);

var opts = {
    childList: true, 
    attributes: true, 
    characterData: true, 
    subtree: true
}

observer.observe(target,opts);