Javascript - Change selected options

Question

I have a dropdown select menu where each option i get from php code, like this:

<div align = "center">
    <p>
         <select class="selectpicker" name="select_Parti[]" id="parti_list" multiple>
              <?php 
                    if($res_Participates){
                          while($tuplo = mysqli_fetch_array($res_Participates)){
                                $Nome_Parti     = $tuplo["Nome"];
                                $Email_Parti    = $tuplo["Email"];
              ?>
                                <option value = <?php echo $Nome_Parti . ", " . $Email_Parti?>><?php echo $Nome_Parti . ", " . $Email_Parti?></option>
                                <?php
                          }
                    }
                                ?>
         </select>
    </p>
</div>

And i have a onchange function in another menu, that when it get's called i want to set the selected options by a given criteria. The problem is that i can't set any option selected from the called function. I've tried many ways, for example:

document.getElementById('parti_list').value = 'Joana Cunha, Joana@outlook.com';

I know that this question as been asked before, but none of the answers i found are working. Any suggestion?

Thanks

EDIT: Note that this question is different from mine.[Get selected value in dropdown list using JavaScript?

On my case i start with a dropdown menu that has no options selected and i'm not being able to, in a js script, set options to selected.

EDIT

So i found that the option is being selected as i wanted, but it only changes its state when i select another option. For example, if i do

document.getElementById("parti_list").options[1].selected = true;

on my onchange function, when it is called my option 1 doesn't change to selected, but if i manually open my dropdown menu and select for example option 0, both 0 and 1 appear selected. Any idea how to solve this? Maybe i'm missing some refresh function so that option 1 automatically changes to selected

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — , Jan 23 '18 at 01:57
I don't think so. I'm trying the reverse. I have a dropdown menu with 0 items selected and i want, through the onchange function, select some options. — César Pereira, Jan 23 '18 at 02:02

score 0 · Answer 1 · answered Jan 23 '18 at 02:05

0

<select id="list">
  <option value="v">Volvo</option>
  <option value="s">Saab</option>
  <option value="o">Opel</option>
  <option value="a">Audi</option>
</select>

<script>
  document.getElementById("list").options[1].selected = true;
  // this sets "saab" option as true.
  // or...
  document.getElementById("list").value = "s"; // ID, not innerHTML.
</script>

try it out : jsfiddle

answered Jan 23 '18 at 02:05

Gyuhyeon Lee

878
1
9
20

The second option is basically the one i referenced on my post that isn't working. And the first solution you gave is also very helpfull but it isn't working on this case. It should work! I did: document.getElementById('parti_list').option[0].selected = true; So that when i change the value on the dropdown menu it should make the first option selected, but it isn't happening – César Pereira Jan 23 '18 at 02:14
It's options[0], not option[0]. I suggest taking a basic online tutorial on javascript and DOM manipulation. The first one works, as you can see in jsfiddle. Your rendered html is probably broken somewhere. Use Chrome dev tools to see how the html source is compiled, instead of posting your raw PHP source that can't be interpreted without the full knowledge of the original code. You're asking for javascript/DOM manipulation advice, not PHP debugging. Please post the HTML code instead of PHP source which may or may not be properly rendered into HTML from your server. – Gyuhyeon Lee Jan 23 '18 at 02:46
Please check my last edit on the post. I found what the problem is – César Pereira Jan 23 '18 at 02:58
note that onchange only fires when you change the option selected on the menu. That is, if "a" is selected in the menu with onchange callback, it wont fire when you press it and select a again. You need to select b or something else. Its on"change", not on"click" – Gyuhyeon Lee Jan 23 '18 at 03:02
But my onchange function is from another dropdown menu, not this one where i'm having the problem. Basically i have 2 dropdown menus. when i change the selected option in the first one (where my onchange function is defined) i want to change the selected option on the second dropdown menu – César Pereira Jan 23 '18 at 03:04
Another reason to this is that both this menus are in a form. Does that incluence? I want to make this change before the submit click – César Pereira Jan 23 '18 at 03:09
DOM element manipulation is instant. Please check out jsfiddle that I made and see for yourself that javascript is not the issue. You keep thinking this is a javascript issue - it's not. As I said, you're probably not changing the other dropdown menu properly. Merely clicking it won't fire the onchange. It only fires when you actually change it to something else OTHER THAN the option that was already selected. Or, you've probably bound the onchange in a wrong way, either using same "id" attribute or something. – Gyuhyeon Lee Jan 23 '18 at 03:10
On the first menu i change the option! I don't just click, i change it. Proof of that is that the reaction i want (select options on the other menu) is happening. The problem is that it is not instantly. The option i just changed to selected on my function onchange changes state when i also select another option on that menu. That's what i don't get, because, as you said, DOM manipulation is instant. – César Pereira Jan 23 '18 at 03:18
Create a jsfiddle page to demonstrate your issue. You won't be able to get any help with vague info. Stackoverflow is a place for technical questions, not personal team of debug troubleshooting. – Gyuhyeon Lee Jan 23 '18 at 03:20
Trying, not even working: https://jsfiddle.net/pLf87o8r/ i never used jsfiddle before. Am i doing something wrong? – César Pereira Jan 23 '18 at 03:27
that's my jsfiddle. If you mean you tried my jsfiddle, you need to press "run" on top left to see the javascript working. If you mean you tried editing the jsfiddle, you can't because it's mine. Create a new one at [https://jsfiddle.net/](https://jsfiddle.net/) and save it, then post it here. – Gyuhyeon Lee Jan 23 '18 at 03:30
https://jsfiddle.net/kgbfowtb/1/ here, you can see it works. separating it into js breaks the code, must be a bug in jsfiddle. Other than that, your code was broken because it was document.getElementByID. it should be document.getElementById. please use a linter in your development environment. – Gyuhyeon Lee Jan 23 '18 at 04:07
Well, i must be doing something else wrong. I'll have a better look. I'll close or delete the question. Sorry for the waste of time – César Pereira Jan 23 '18 at 04:12
chrome dev tools is your friend. Use it, try typing the code into the console in dev tools to directly run lines of your code individually on your web page. that way youll see where its going wrong. – Gyuhyeon Lee Jan 23 '18 at 04:14
here, watch this https://m.youtube.com/watch?v=FQKvro1Wz-E it will help you a lot in the long run. – Gyuhyeon Lee Jan 23 '18 at 04:15
Will do. Thanks a lot for the help – César Pereira Jan 23 '18 at 04:18

score 0 · Answer 2 · answered Jan 23 '18 at 02:14

0

var select = document.getElementById('foo')

foo.value = 'zoo, zoo'

console.log(foo.value)

<select name="foo" id="foo" multiple>
    <option value="bar, bar">bar, bar</option>
    <option value="zoo, zoo">zoo, zoo</option>
</select>

try modify <option value = <?php echo $Nome_Parti . ", " . $Email_Parti?>><?php echo $Nome_Parti . ", " . $Email_Parti?></option> to <option value="<?php echo $Nome_Parti . ', ' . $Email_Parti?>"><?php echo $Nome_Parti . ", " . $Email_Parti?></option>, I am not good at php:(.

Hope helpful.

answered Jan 23 '18 at 02:14

Jiang Xuan

98
9

Look at the compiled HTML structure, not with PHP code. – Jiang Xuan Jan 23 '18 at 02:33
I think that suggestion actually helped. I noted one thing, i'm defining the value of the option to the concatenation of "Nome_Parti, Mail_Parti". But imagine, Nome_Parti is equal to, for example, "Joana Cunha", two words. When i do value = Joana Cunha, html is not taking in consideration the second word. So, value will be Joana and then appears in the code "Cunha" which the compiler doens't know what it means.. Any idea to solve this? I don't know if i explained myself well enough – César Pereira Jan 23 '18 at 02:40
I solved this problem with your suggestion, getting the php line between " . Html now already considers the value as that all sentence. But it still doesn't work – César Pereira Jan 23 '18 at 02:46
Look at the compiled HTML is not an option value for your specified value. – Jiang Xuan Jan 23 '18 at 02:55
Try to remove select multiple attribute. – Jiang Xuan Jan 23 '18 at 03:05
That doesn't work. Bue even if it did i need the multiple attribute – César Pereira Jan 23 '18 at 03:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163675/discussion-between-jiang-xuan-and-cesar-pereira). – Jiang Xuan Jan 23 '18 at 03:10

Javascript - Change selected options

2 Answers2