How to get a select's options by first and last characters - javascript

I am trying to select an option to be viewed from a select dropdown. The code works by selecting the first characters of the element (e.g "Wood_20Sept" "Fire_20Sept" "Water_20Sept"). Snippet of the working code:
filterList(document.getElementById("worldElementsList"), /^Wood/i);
So this would select any options with the word "wood".
Like:
"Wood_20Sept"
"Wood_20Mar"
"Wood_20May"
Problem is now there is a version 2 of these groups ("Wood_20Sept_V1" "Wood_20Sept_V2" "Fire_20SeptV1" "Fire_20SeptV2")
So I want to select the options by first and last: "Wood" and "V2".
So basically I need the code to say this:
filterList(document.getElementById("bankInfoList"), /^Wood/i && /v2$/i);
But that will only select the "V2"

Follow below steps:
A.Take whole string as a array
B. Find array[length-1] and array[length-2]
To match last elements with your string

Related

How to click elements that have generated id's if I don't know what the ID will be in Selenium

Say I have some HTML mark-up as such:
<select id="select_titleOfSelect-1212_01" name="titleOfSelect-1212"
<option value="ONE"></option>
<option value="TWO"></option>
<option value="THREE"></option>
</select>
Multiple of these select elements can be generated dynamically
in which the number after titleOfSelect can always be different.
Also the "01" will increment by 1 if there is more than one select generated on the same page.
I have been able to click on these using this:
.click('select[id^="titleOfSelect-"] option[value='ONE']')
How can I click on the 2nd, 3rd, so on.. select element on the page if there is more than one?
I'm using Javascript with Selenium
You don't search for the element based on its ID if the ID is randomly generated. You'll have to use an XPath or CSS selector and get creative.
Here's how I would click on the options:
// option 1
driver.findElement(By.xpath("//select/option[#value='ONE']")).click();
// option two
driver.findElement(By.xpath("//select/option[#value='TWO']")).click();
// etc..
Or, if you don't want to use value, you can use the index:
// click first option
driver.findElement(By.xpath("//select/option[1]")).click();
// click second option
driver.findElement(By.xpath("//select/option[2]")).click();
// click third option
driver.findElement(By.xpath("//select/option[2]")).click();
If there are multiple select elements on the page, you can try to do a contains query on the title:
//select[contains(#title, 'titleOfSelect')]/option[1]
You can use :nth-of-type() to pick which SELECT you get, e.g.
select:nth-of-type(2) option[value="TWO"]
would select the OPTION that contains the value 'TWO' in the second SELECT
You can simply use the findElements method to find the locator id^="titleOfSelect-". This will return ReadOnlyCollection<IWebElement> which you can convert to a list and then target whatever index you want to target.

How can I add only unique options in multiple select tags which are in same class?

I need to dynamically add options to the select tags. Those options I will be fetching it from a file. There can be many selects in the form. Now I need to check all the selects whichever is in the same class If it doesn't have the option which I fetched from the file Then I need to add that option to that particular select.
var name = $(this).attr('name');
$('.slct').each(function(){
if($('this option[value="'+name+'"]').length==0)
{
$('<option>').val(name).text(name).appendTo(this);
}
});
When I tried the above code, Options are getting duplicated. For example I have 3 select tags. In the first tag I have an option called option1 remaining two tags are empty. Then after the execution of this code. First select tag contains the option1 twice and the remaining two tags contain only once. Can Someone tell me how do I do it ? I am new to jquery.
You can use find() to check if option with specific value exists in the select this way:
if($(this).find('option[value="'+name+'"]').length==0)
{
$('<option>').val(name).text(name).appendTo(this);
}
FIDDLE DEMO:
http://jsfiddle.net/3Lkv638x/1/

Ext js get row spesific cell string value's first 4 elements

I want to get first 4 elements a cell value because I want to use an if statement.
I get cell value like below.
My code sample:
var data = row.data;
if(data.MyStoreDataIndex=='something'){
//TODO
}
But, I want the first 4 elements because cell contents are the same only first 4 elements.
If I get what I want, I change my if statement. I don't want these with selected cell or selected row.
data.MyStoreDataIndex.contains()
this is the solution :)

change name of dynamically added select option element

I am dynamically generating some dropdowns and then allowing them some of those to be removed on board dyanmically. so that time, i have encountered an error of selection option (dropdown) elements id mismatch. something like below is.
newly added dropdowns.
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][1]" id="client_time_window_1">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
after i dynamically remove them via javascript. (lets say i am removing the second one) so then new ones will be displayed as followings,
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
So now the issue i have is, the names of the dropdowns are like this, (0,2,3)
CSSAtapsClient[client_time_window_arr][0],
CSSAtapsClient[client_time_window_arr][2],
CSSAtapsClient[client_time_window_arr][3]
So this is causing an error for me and i need to reorder this name and make it be like this, (0,1,2)
CSSAtapsClient[client_time_window_arr][0]
CSSAtapsClient[client_time_window_arr][1]
CSSAtapsClient[client_time_window_arr][2]
how can i simply rename these dropdowns name attribute (from 0 to how much ever dropdows are exisiting) ? appreciate an early reply
EDIT 1
I tried this, but didnt work.
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][i]");
});
You can simply reset the values using .attr() method:
$('#tbl_dynamic_call_dates select').attr('name', function(i) {
return 'CSSAtapsClient[client_time_window_arr]['+ i +']';
});
I did this,
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][" + i + "]");
});

new separator for textarea in html

I'm trying to give the user ability to create customized list for my application,by insert his choices in text area field ,each line is treated as one choice using the \n (enter) as separator , i need to allow user to enter one choice in multiple lines,any one can help?
<textarea></textarea>
user enter :
aa
bb
cc
with enter in textarea, and then I'm processing them to split them at enter separator ,so i have three option in list :1-aa ,2-bb,and 3-cc ,but what i need to make aa ,bb is the first option, and cc second option ,i need new separator, i need more ideas?
I think you're saying that you need the user to enter listable items in a textarea and need to support the ability to present a single option across multiple lines.
As you've seen, using a single newline as the item separator does not work - you can't differentiate between two items on one line each and a single item presented on two lines.
Use two newlines instead of one as the item separator.
Example input:
Item One
Item Two line 1
Item Two line 2
Item Three
You can use whatever separator you like. For example an empty line (as when separating chapters), or a comma or semicolon. Any character (or sequence of characters) that is not part of the text to be entered.
Just remember to tell the user what to use as a separator.
This code will allow for the options to be entered on multiple lines and the options are created once you press Enter twice:
JavaScript
<script type="text/javascript">
var LastKeyCode=-1;
function updateOptions(e) {
if (e.keyCode) {
var KeyCode=e.keyCode;
} else {
var KeyCode=e.charCode;
}
if (KeyCode==13 && LastKeyCode==13) { // Enter?
var RowsDataAry=document.getElementById('inputfield').value.replace(/\r\n/g,"\n").split(/\n{2,}/g); // Fix IE CRs and split the textarea input
document.getElementById('choices').options.length=0; // Empty select
for (RowID in RowsDataAry) {
var TextVal=RowsDataAry[RowID].replace(/\n/g,", ").replace(/, $/,""); // Set commas and remove the last comma
document.getElementById('choices').options.length++;
document.getElementById('choices').options[RowID].value=RowID; // Add option value
document.getElementById('choices').options[RowID].text=TextVal;
; // Add option text
}
}
LastKeyCode=KeyCode;
}
</script>
HTML
<select id="choices" size="20"></select>
<textarea id="inputfield" onkeypress="updateOptions(event)" cols="40" rows="20"></textarea>
Tested in Firefox 3.6.3, Opera 10.53, IE 8 and Iron 5.0.380 .

Categories