function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Shirley2009Shirley2009 

How to get the value add to selectlist using javascript?

I  have two selectList,list1 and list2. the option of list2 is add according the selected item in list1 automaticly in javascript.

the code is:

 

<script>
 var hotel=new Array();
 var brand=new Array();
 var type=new Array();
 <apex:outputText escape="false" value="{!MyHotel}"></apex:outputText>
 <apex:outputText escape="false" value="{!MyBrand}"></apex:outputText>
 <apex:outputText escape="false" value="{!MyType}"></apex:outputText>
function list2(list2id,n)
{
 var list=document.getElementById(list2id);


 for(var i=list.length-1;i>=0;i--)list.remove(i);
 for(var i=0;i<hotel.length;i++)
 list.add(new Option(hotel[i],hotel[i]));
 }
</script>
<apex:outputPanel id="result">
<apex:form >
<b>Report By: </b>
<apex:selectList id="list1" multiselect="false"  size="1" value="{!reporttype}"  onchange="list2('{!$Component.list2}');">
<apex:selectOption itemValue="1" itemLabel="Hotel"></apex:selectOption>
<apex:selectOption itemValue="2" itemLabel="Hotel Brand"></apex:selectOption>
<apex:selectOption itemValue="3" itemLabel="Hotel Type"></apex:selectOption>
</apex:selectList>
<b>Please select :</b>
<apex:selectList id="list2" multiselect="false" size="1" value="{!reportby}">
</apex:selectList>
<apex:commandButton value="Go!" action="{!doSearch}" status="status"  reRender="result"/>

<apex:form>

</apex:outputPanel >

 

the problem is I can't get the value of reportby in my apex, where is the problem?

Best Answer chosen by Admin (Salesforce Developers) 
PratibhPratibh

Hi.....

Once you get component by getElelmentById, just treat it as normal HTML component to get value like:

 

 

var sel = document.getElementById('sbox').selectedIndex;
var xx = document.getElementById('sbox').options[sel].text;

All Answers

PratibhPratibh

Hi..

 

Use this directly in your javascript it should work....

 

document.getElementById("{!$component.SchemaApp.<your componenet Id>}");

 

Note: SchemaApp is id of <apex:form>

Shirley2009Shirley2009

hi,I can get the selected value in javascript,but i can't get the value of 'reportby' in my apex class,

<apex:selectList id="list2" multiselect="false" size="1" value="{!reportby}">
</apex:selectList>

i don't knew why

PratibhPratibh

Hi.....

Once you get component by getElelmentById, just treat it as normal HTML component to get value like:

 

 

var sel = document.getElementById('sbox').selectedIndex;
var xx = document.getElementById('sbox').options[sel].text;

This was selected as the best answer
sForceRoshansForceRoshan

Hi....

 

This select list doesnt have any selectoptions in it ........might be bcoz of that u r

not getting the value in reportBy in the apex class.

<apex:selectList id="list2" multiselect="false" size="1" value="{!reportby}">

<!-- Write the code for Select Options here -->
</apex:selectList>

AngulixAngulix
Hi,
Just giving feedback here a I used this post to get value from an apex:selectlist in a Javascript section.
What is above is very right, thanks a lot for the answers, and drive me the result, but I had some additionnal issues:  

First it didn't work because I put partiel id. If my <apex:selectlist> is as the following

<apex:selectlist id="list2"...

Doing:

vSelectedItem = document.getElementById("list2").selectedIndex;
vFieldName = document.getElementById("list2").options[vSelectedItem].text;

Will not work (as mentionned somewhere above), I had to put the full ID. In my case:

vSelectedItem = document.getElementById("tPage:tForm:filterList:aPageBlockTable:iFieldName").selectedIndex;
vFieldName = document.getElementById("tPage:tForm:filterList:aPageBlockTable:iFieldName").options[vSelectedItem].text;

Question: How to get the full ID ? First, set the id of each element in the tree, then open Chrome Console (CTRL+SHIFT+I) and inspect the element, you'll find nearby the full ID (It seems obvious, except when you don't know it).

In my case, an other difficulty, the <apex:selectoption > was a row of a table, and could be row 1, row 2, row 3... Depending on the row, the id, which depends the path, is dynamic:

For row 1: "tPage:tForm:filterList:aPageBlockTable:0:iFieldName"
For row 1: "tPage:tForm:filterList:aPageBlockTable:1:iFieldName"
...

I dealt with this with a litlle of Javascript that set up a javascript variable with the row ID. See below:
In the apex code, I have a variable at the class level, that is accessible from outside (see default get and set).  

public String vIndexToQuery { get; set; }

At the top of the page, I have javascript script to store the value locally:

<script type="text/javascript">
 var vIndexToQuery = ''; 
function setIndexToQuery( pIndexToQuery ) {
vIndexToQuery = pIndexToQuery;
}
</script>

In the table, close to the apex:selectList tag, I have again a small piece of code:

<apex:selectList value="{!vSelectedField}" size="1" id="iFieldName">
<apex:selectOptions value="{!vPossibleFields}"/>
</apex:selectList>

<script>setIndexToQuery({!vIndexToQuery});console.log('INDEX TO QUERY '+{!vIndexToQuery});</script>

Dealing in such way will allow stuff to work even with partial page refresh (using the rerender tag). In my case, the main javascript is not rerendered but the value of vIndexToQuery is updated anyway when the part below is updated.

Hope this post will save few hours to some of you ;-)