Select menu option's text by double click on it - javascript

I have menu list with recent 10 contacts with name and number without navigation link (ie. anchor tag)
I want to select name or number by double clicking on it without closing menu options list. Is this possible?
I used stopPropagation() method to preventing closing menu option. How can I achieve selecting text by double click?

Not sure what you want to accomplish exactly since you didn't provide any code. But from what you are asking I think is what you want to use.
document.getElementById("YourMenuID").getElementsByTagName("a").ondblclick = function(){
//request you value here
};

Related

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

Click on <li> tag from a bootstrap select2 dropdown in internjs

I am writing some function test on a form and I am running into issues selecting values from a bootstrap-select2 drop-down.
If you are unfamiliar with Select2, here are some examples;
https://fk.github.io/select2-bootstrap-css/3.5.1.html
All the drop-downs are un-order list that appear when you click on the drop-down.
I click on the drop-down with;
.findById('select2-chosen-1').click().end()
The above lines makes the un-ordered list appear, but I am unsure how to select a specific selection.
if I do the following I can print out all the selections;
.findById('select2-results-1')
.getVisibleText()
.then(function(text) {
console.info(text);
})
I tried to get all the li tag names under that , .findAllByTagName('li'), but I am not sure what to do with that array.
Any help to point me in the right direction would be very helpful. Let me know if you need any more info.
Thanks!
Once you open the dropdown, you just need to find the particular item you want to select and click it. I generally use findByXpath, or a combination of findByCssSelector and findByXpath, when I'm trying to find something that contains text, like:
.findById('select2-chosen-1')
.click()
.end()
.findByCssSelector('.select2-drop-active .select2-results')
.findByXpath('.//li[div[text()="Alaska"]]')
.click()
.end(2)
The code above finds the Select2 and clicks it, then finds the dropdown result node. With the result node as the current reference, it uses an XPath expression to find the li that contains a div with text "Alaska", then clicks the li. The end(2) after the click handles both the findByXpath and findByCssSelector calls.

Chosen jQuery framework select option from dropdown with Javascript

I'm using the Chosen jQuery framework with a basic select statement.
I use the following line of code to open the dropdown:
$('#<id-of-your-select>_chzn').trigger('mousedown');
That statement opens the Chosen dropdown.
Then I want to select the top item which is a li element with the id: pt_chzn_o_1.
I've tried the following, but none of them will select the option.
$('#pt_chzn_o_1').trigger('mousedown');
$('#pt_chzn_o_1').click();
How do you select an option using Javascript/jQuery as if I clicked the top option with my mouse.
Why don't you just change the selected index instead? It seems like you are trying to achieve the same thing but go about it in the "human way" as oppose to the "programming way", like so:
$('#<id-of-your-select>').val('value-of-pt_chzn_o_1').trigger('chosen:updated');
Make sure to change both the jQuery selector and the value to match your circumstances.
This is what ended up working for me:
The initial click triggers an event to show additional fields(optional, only needed in my specific case).
$("#<id-of-your-select>_chzn").trigger("click")
This statement opens the Chosen dropdown:
$("#<id-of-your-select>_chzn").trigger("mousedown")
Execute this statement on the li element id of the chosen dropdown element you want to choose.
$("#pt_chzn_o_1").trigger("mouseup")

Get the value of a Drop list while hovering the options without clicking with JS

How can I get the value of a Drop list while hovering the options with the mouse without clicking (selecting) using JS or jQuery?
Ex.
List of Stuff
-Dog
-Cat
-Bird
When I move my mouse around the options of the droplist, it will tell me that my item is being highligted.
This isn't possible with standard selects, but if you need the desired effect badly enough you can create your own select components and back them with hidden inputs.

follow url before hiding anchor-tag

I have an autocomplete search form, more or less like the one used on facebook, where I start typing and a list of names shows up.
I made links of each of these names so you can open their profile page.
I also have a function on the search form's input field 'onblur', where I hide the autocomplete div with all the names. So that when I click outside it, it doesn't stay visible. The only problem now is that when I click one of the names, the pages doesn't redirect to the profile page of the anchor tag, even though the cursor does change on hover.
Anybody any idea?
This is because your hide event removes the list before the element can actually be clicked. There are couple of solutions.
First you could use a setTimeout to hide
setTimeout( function() { /* hide list */ }, 500);
In answer to your comment, no, you can't reorder events. So you will have to find a work around. There are a number of methods, but since you are using jQuery I would do it this way.
//you probably have something like this currently
$('element').blur( function() { $('results').hide(); });
//change it to something like this
$('element').blur( function() { $('results').fadeOut(300); });

Categories