Select an id value from a variable in JQuery

[adrenerg1co]

I have two or more selects in a form; for simplicity we say two; referring to the first idFilmstarwars I would like to replace idFilmstarwars … id by var selectValue = $ (# idFilmstarwars, ‘option: selected’). val; … with the selectId variable, what can I do?

I’ll explain:

I’m importing a movie list from a file; each select represents a searched movie in the list, therefore in each option there are the different movies of each searched title; it’s all dynamic because I can’t know how many films there will be on the list and how many variations of the film will be found for each film; therefore also the id of the select and of the options is dynamic; each id will have a different value; the only static id is that of the form; my intent once I have imported the movies and put the variants in the options … which I did and it works … and allow the user to choose his variant for each select; therefore I need a system that stores the variation of the select and I thought about onchange; I must therefore memorize this variation; the selectValue variable takes the content of the select through text, however this system works if I indicate in the parameters the id of the select which, being dynamic, changes; what I can’t do is replace the requested parameter as id in a variable that stores in the previous line of the code what is the id of the select; as I wrote it doesn’t work: var selectValue = $ (selectId, ‘option: selected’). text; it gives me an undefined value while if I replace the selectId variable with a static id set by me, it works; I don’t know syntactically what I’m wrong; subsequently the data obtained will be sent to the database

Thank you

    <select id="idFilmstarwars " class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>

    <select id="idFilmmatrix" class="form-control">
        <option value="0">Select Value 1</option>
        <option value="8">Option value 7</option>
        <option value="5">Option value 2</option>
        <option value="4">Option value 3</option>
    </select>


<input type="text" id="textFieldTextJQ" class="form-control"
placeholder="get value on option select">

$("#idFilmstarwars ").on("change",function(){
//Getting Value

var selectId = $("select").attr("id");

var selectValue = $(selectId, 'option:selected').text;

// var selValue = $("'#' + optionId :selected").text();

alert(selectValue);

var selectValue1 = $(this).children(":selected").text();

alert(selectValue);

//Setting Value
$("#textFieldTextJQ").val(selectValue);
alert(selectValue);
$('#test').attr('id')
});

[Martyr2]

Honestly I am not quite sure I understand what you are asking about, but I noticed that you are trying to get the ID and text of a select statement that can then be used in setting some other field. So lets start by first showing how to quickly get the ID and text of a selected option of a select when it changes…

  $("#idFilmstarwars").on("change",function(){
    // Get id of the changed select (this element)
    let selectId = $(this).attr("id");
    
    // Get the selected option from this select
    let selectedText = $(this).find('option:selected').text();
    
    // Print them to console to see
    console.log(selectId);
    console.log(selectedText);

  });

Notice here that when a change is detected on your first select (make sure there are no spaces in your id field to make things easy for yourself) we use the this keyword to refer to the element that made the change. In our example, this would equal your idFilmstarwars select. So if change for some reason, this will always refer to whatever triggered the event. Then we can use attr() to get its ID, we also can call find() and provide it the option:selected tag to find which option is selected. With these two values, we console.log them so we can see them in dev tools.

Once you have these two values, it is a matter of just selecting any other element and setting the appropriate values using these values you have retrieved from the first select. Hopefully this makes sense and answers the question.

Btw, this is assuming that the select drop downs only allow one selection and would have to change slightly if you wanted multi-selected option boxes.

[adrenerg1co]

The solution seems interesting but I can’t see the variables in the consoles, why?

[Martyr2]

Notice on your first select HTML control, the ID attribute has a space in it. Remove the space. It should be id="idFilmstarwars" and not id="idFilmstarwars " (again notice the space after the “s”).

I hope that helps.