Clear selected option in IE with javascript or jQuery - javascript

Imagine this HTML code
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function clear_form() {
$("select#block_id").find("option").removeAttr("selected");
}
</script>
</head>
<body>
<form>
<select id="block_id" name="block_id">
<option value=""></option>
<option value="1">1 Peach Road</option>
<option value="2" selected="selected">Bethnal Green Estate</option>
<option value="3">Ley Street</option>
<option value="4">Ogilby Street</option>
</select>
<input type="reset" onclick="clear_form()" value="Clear"/>
<input type="submit"/>
</form>
</html>
When you open this page in Firefox pressing a Clear button will reset selected option.
But this doesn't work in IE, browser will not raise any errors but do nothing selected option still shown.
Problem is because we have 'option value="2" selected="selected"' html code and looks like IE won't clear this selection it always appear on page.
It will be great to get native javascript or jQuery 1.5.2 solution.
Any suggestions?

You could use JavaScript to reset the select to point to its first option element.
With jQuery...
$('#block_id').prop('selectedIndex', 0);
Without...
document.getElementById('block_id').selectedIndex = 0;

Seems like Reset button is reason why it is restoring the value in IE.
A reset button resets all form fields to their initial values
In your case option 2 was initially selected and so the value is retained.
Change the button type to button instead of reset
Change the clear function as in Alex post.
document.getElementById('block_id').selectedIndex = 0;

Related

open a long <select> dropdown to specific option when the dropdown is first clicked

I have a large dropdown list containing possible answer like this:
<select name="mySelect" id="mySelect" required="" >
<option value="-100" > -100% </option>
<option value="-99" > -99% </option>
<option value="-98" > -98% </option>
<option value="0" > 0% </option>
<option value="101" selected = "" hidden = ""> ----- </option>
going from -100 to 100.
When the dropdown is first clicked, I would like it to open (and select) at a prespecified value, i.e. at 0.
I have tried this:
$('#mySelect').one('focus', function() {
$(this).children('option[value=0]').prop('selected',true);
});
and this works well in Chrome, but it doesn't work in Firefox, which is a problem for me. (edit) As mentioned in the comments, in Firefox above script selects the correct option, but dropdown is not scrolled to that value.
Help with a working solution in both Firefox and Chrome would be greatly appreciated.
Here is a fiddle of the problem: https://jsfiddle.net/monni/an4guvse/28/
I don't want to show any "real" value before the dropdown is clicked
Given this statement, in the comments, what you're attempting to do is not workable. The actions available on an options list within a select are vey limited, and this behaviour is non-standard.
I'd argue it's even counter intuitive and will confuse your users and cause more problems than it solves.
What you're attempting to achieve seems like it could be better solved by using a range input:
$('#foo').on('input', e => $(e.target).next().text(e.target.value + '%'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="range" min="-100" max="100" value="0" id="foo" />
<span></span>

multiple select drop down gets reset when calling window.print()

I happened to notice that my multiple select dropdowns are getting reset when I call the window.print() function on the click of a button to print the current page.
This seems to have been working on Chrome v80 but it seems the issue is part of v81.
I am using a workaround for this by displaying values in an input box (rather than the multiple select tag) on the print button click. I was wondering if there is a better solution to the issue.
A sample code is given below: Selected option values are retained in Chrome v80 but not on v81 when the print button is clicked.
<html>
<head>
<script>
function printPage(){
window.print();
}
</script>
</head>
<body>
<select id="test" name="test" multiple>
<option value="1">My val 1</option>
<option value="2" selected>My val 2</option>
<option value="3">My val 3</option>
<option value="4" selected>My val 4</option>
<option value="5">My val 5</option>
</select>
<input type="button" value="print" onclick="printPage()"/>
</body>
</html>
Is your issue that the elements do not appear selected in the printout, or that after pressing print, the page forgets what was selected and the user must select them again? If it is just about appearing in the printout, it is possible you have "background graphics" unchecked in the "more options" section of the print dialog

JQuery to change value based on selection in a drop down menu

Using JQuery I'm trying to create a drop-down menu and then change a certain value on a search input element based on what people select in the menu.
So far I've figured out how to target the value I need to change. I've also gotten as far as having it so that if someone makes any selection from the menu, it changes the search input value to one specific value:
<div>
<form action="setColor" method="post">
<fieldset>
<label for="color">Select A Color</label>
<select name="color" id="color">
<option>Blue</option>
<option selected="selected">Red</option>
<option>Yellow</option>
</select>
</fieldset>
</form>
</div>
<script>
$(function() {
$('select[name="color"]').change(function() {
$('input[name="ancestorId"]').val("9999");
});
});
</script>
What I need now is something that sets the value according to the menu selection, matched up something like this:
Blue = 9999
Red = 8888
Yellow = 7777
I'm still looking at examples and will keep trying, but kind of stuck. Any advice appreciated.
You should put the value assignment in the option elements, as they were designed for just that:
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
And the script nearly stays the same, except I've used the elements IDs instead of their names in the selectors (assuming here your ancestor element has such an ID):
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
Note that the chained .change() call will trigger the change event that was just assigned, so that the pre-selected item's value will be populated into the text field when the page loads.
See it in action:
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
<input id="ancestor" type="text" />

How to disable a drop down field from editing but keep the vaule inside

I have a page where users enter certain information about a car in a database and then they have the possibility to edit this information from another "Edit" page. I would like to forbid the users from changing the Make and Model of the car on the Edit page but still to keep the originally selected values. I tried disabled="true" but upon editing the page, the values are not being remembered. Is there anther way to do it? readonly="true" seems not to do the job either.
Here is my code for the model field on the "Edit" page:
<select name="model" id="model" class="validate[required] text-input">
<?php while(!$rs_models->EOF){?>
<option value="<?php echo $rs_models->fields['id'];?>" <?php if($rs_models->fields['id']==$model_id){?> selected="selected"<?php }?>>
<?php echo $rs_models->fields['title'];?>
</option>
<?php $rs_models->MoveNext(); } ?>
</select>
You need to put an attribute in option to disable dropdown but on certain condition like:
<option disabled >car</option>
More clear Example of my previously provided suggestion could be like this. This will block a certain option in the select (drop down)
<!DOCTYPE html>
<html>
<body>
<select>
<option value="car" disabled>Volvo</option>
<option value="bike">Saab</option>
<option value="truck">VW</option>
</select>
</body>
</htm>
If you want to block the whole select box (drop down) with your value (option) showing in it this could be the solution.
<!DOCTYPE html>
<html>
<body>
<select disabled>
<option value="car">car</option>
</select>
</body>
</html>

Cannot Fill Textbox with Javascript After Editing

I have a simple drop-down box and I am successfully using Javascript to automatically fill a textbox when a drop-down item is selected.
Once I edit any of the textbox's automatically filled text, or use a "Clear" button to erase textbox, the drop-down list no longer replaces fills the textbox.
How can I continue to use the drop-down box once the user has altered the textbox?
JSFiddle Version
HTML code:
<select id="dropdown" onchange="preset();">
<option value="">Select a person:</option>
<option value="Abe" >Abe</option>
<option value="Bob" >Bob</option>
<option value="Cal" >Cal</option>
<option value="Dan" >Dan</option>
</select>
<input type=Submit value="Clear" onclick="document.getElementById('mytext').value='';">
<textarea id="mytext"></textarea>
Javascript code:
function preset() {
document.getElementById("mytext").innerHTML=document.getElementById("dropdown").value
}
You use innerHTML in one place, and value in another. Using value in both fixes it.
Demo
Update the submit button to this:
<input type=Submit value="Clear" onclick="document.getElementById('mytext').innerHTML='';">

Categories

Resources