I asked here a couple of days ago how can i make a dropdown section in a form pre select an option.
I have got an answer and tried it and some other suggestions i have found online, all of which had failed.
I attached two pictures showing what I did, so hopefully you guys will be able to help me.
(bear in mind that i used a plugin which only allows me to add code not edit the given one)
Num1
thats how the plugin made the form, i cannot edit it
Num2
thats what i have tried and it did not work
EDIT
here is the code the pulgin made:
<label class="fitText" style="font-size: 16px;">Product</label>
<select name="Product" data-export-field="">
<option value=""> - Product - </option>
<option value="A" data-price="0">
A
</option>
<option value="B" data-price="14">
B
(+$14.00)
</option>
</select>
What I made:
<script>
$(window).load(function() {
$('#Product option[value=A]').attr('selected','selected');
});
</script>
Hope you guys will help me! :D
Thanks
Yarin
This should achieve what you want-
script -
$(document).ready(function() {
$('select[name=Product] > option[value=A]').attr('selected','selected');
});
The # selector is for ID's, not name. Use the same selector for name as value.
$(document).ready() (or $(function() {} )) should be a little bit quicker as it calls when the DOM is ready for manipulation rather than when everything is ready. I've also heard that $(window).load(function() {}) can be called at unintentional times, project depending.
Otherwise your code is solid.
Or you can try this one :
$(document).ready(function(){
$("#select_id").val('A');
});
On page load, set default value for the select tag. Might help you.
Related
I'm trying to insert the select options tag into my conversation, to make it more simple to the user. I did this:
And in the index.js:
function selected(){
switch($('#selected option:selected').val()){
case 01:
alert("01");
break;
case 02:
alert("02");
break;
}
};
But it doesn't recognize the option selected. I tried without the function selected() (only with switch case), but it didn't worked.. Can somebody help me please? Thanks a lot!
I believe your HTML inside the Advanced context have something you miss.
In your HTML in onselect your typed :, but, for use onselect and call one function you have to use onselect="nameFnction()"
See one simple example inside MDN to use this tag:
<input type="text" onselect="myFunction()" value="Hello world!">
Now, see other example for works fine according the choice:
<select>
<option onclick="doSomethingA(this);">A</option>
<option onclick="doSomethingB(this);">B</option>
<option onclick="doSomethingC(this);">C</option>
</select>
And with jQuery (Your id is select and not selected):
$('#select option:selected').val()
I'm using datatables, with their example i was able to build tables nicely. But the problem is i don't seem to understand how to move the "records per page" element, which is a "span6" class of bootstrap. i do get the point that it's actually javascript which is doing this, need some help on this. Here is the LINK for the example i'm using.
This is the div you are taking about in that page
<div class="span6">
<div id="example_length" class="dataTables_length">
<label>
<select size="1" name="example_length" aria-controls="example">
<option value="10" selected="selected">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>records per page</label>
</div>
</div>
Just copy this to other location and modify the css accordingly.
To modify the DOM using Javascript.
http://woork.blogspot.in/2007/10/how-to-change-text-using-javascript.html
Take a look at this page in their documentation... DataTables dynamic language. It doesn't give the best explanations of how to move things but it's a good place to start experimenting. I was able to hide or change the "records per page" text and I would image there is a way to move it as well.
The preamble on that page says "Changing the language information displayed by DataTables is as simple as passing in a language object to the dataTable constructor. The example above shows a different set of English language definitions to be used, rather than the defaults."
"oLanguage": {
"sLengthMenu": "Display _MENU_ records per page"
}
should give you a place to start.
I am currently using dojo 1.7 to do the programming. I am getting stuck on onChange event for dojo.forms.Select. It seems to me that it never got fired. I tried to search on the Internet. But I am out of luck. What could be wrong? Any suggestions or help would be greatly appreciated.
Code used to attached the event to dojo.form.Select:
var findLayerListOnChangeEvent = dojo.connect(findLayerListSelect, "onChange", function(newValue) {
doFindLayerListChange();
});
HTML code for the dojo.form.Select
<select id="findLayerList" data-dojo-type="dijit.form.Select" data-dojo-props="required:true, sortByLabel:false" name="findLayerList" disabled="disabled" maxHeight=-1 style="width:150px;">
<option value="ID">Layer List</option>
What is findLayerListSelect in your JS code.
In HTML code replace id with data-dojo-id.
Better write a jsfiddle with your code and I can help you fixing it.
I am attempting to implement the ui.selectmenu from here http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/, but have it placed inside of a jQuery dialog. Not sure if that is where the conflict lies.
The HTML markup is:
<div id="selModeBox" title="Mode selection Form">
<label for="mode">Select modes:</label>
<select id="mode" name="mode">
<option value="v0" selected="selected">-- Make a Selection --</option>
<option value="v1">Mode 1.</option>
<option value="v2">Mode 2.</option>
</select>
</div>
The Javascript to implement:
jQuery(document).ready(function() {
$('#selModeBox').dialog({
modal: true
});
$('#selModeBox select').selectmenu();
$('#tabs').tabs();
});
The javascript error appears on load an refers to this line of the ui.selectmenu javascript code (line 108):
this.element.click(function() {
this._refreshValue();
}).focus(function() {
this.newelement[0].focus();
});
Has anyone experienced something similar or have any ideas on remedying this?
Its possible that jQuery 1.8 is causing problems as its not tested yet, please see https://github.com/fnagel/jquery-ui/issues/261
Please open an new issue if the problem persists in 1.7.x (please see https://github.com/fnagel/jquery-ui/issues/61)
I have a JavaScript function:
function redirect(location) {
window.location.href=location;
}
Which I'm using like so:
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
I'm expecting for it to redirect to the selected option value, but does'nt seem to do anything? - bare in mind im new to JavaScript.
Hope someone can help! :)
Try this:
<select onChange="redirect(this.value)">
try this
<script>
function redirect() {
var location=document.getElementById("i").value;
window.location.href=location;
}
</script>
<select onChange="redirect()" id="i">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
Your code itself is functional (i tried).
Where have you placed the function definition?
Is there any other javascript code on the page?
In which browser are you testing this?
If you're running it in Firefox check the error console (Tools->error console).
I also noticed that Internet Explorer 8 blocks this javascript, I haD to check allow blocked content for this to work.
can be because location is a short way to call window.location, so just rename your input parameter - _location, newLocation, loc, whatever else.
UPDATE
Nope, this should work. Having only
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
<script type="text/javascript">
function redirect(location) {
window.location.href=location;
}
</script>
on the page gave me the desired result, so the error may be somewhere around - just give us more code!