Here a snippet from my HTML page:
<div class="col-md-6">
<label for="network_mode" class="form-label">Default network mode</label>
<select name="network_mode" id="network_mode" class="form-select" aria-label="Network mode">
<option value="1">Offline</option>
<option value="2">Hotspot</option>
<option value="3">Station</option>
</select>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#network_mode").value = "~FORM_NETWORK~"
});
</script>
Where the ~...~ placeholder is replaced with a string by a pre-processor of the webserver. The actual content will be, for example:
document.querySelector("#network_mode").value = "2"
In that way, after loading the page the select field will show the currently selected option. This works fine in Firefox, but in Chrome (at least in v101) does not. The select field always shows the first item, no matter the value set.
I've read the querySelector and the select doc pages and I didn't find anything useful about this browser odd behavior.
Where should I gather the required information in order to make Chrome working as well?
Related
I'm trying to have a select inside a materialize modal.
So far everything works fine but when I refresh the content of the modal select with an ajax request, the select disappears.
After investigating, I find that the innerHTML is not proper HTML.
Here is what I have :
let modal = htmlResponse.find('#modal')
let modal_old = document.getElementById('modal')
console.log(modal)
console.log(modal.innerHTML)
modal_old.innerHTML = modal.innerHTML
The console log is the following :
<div class="modal-content">
<h4>Title</h4>
<p>Some Text</p>
<select id="mySelect" name="mySelect">
<option value="" disabled selected>Select one user</option>
<option value="2" id="2 ">Name 1</option>
<option value="4" id="4 ">Name 2</option>
</select>
</div>
<div class="modal-footer">
Cancel
Ok
</div>
Followed by
<div class="modal-content">
<h4>Title</h4>
<p>Some text</p>
<select id="mySelect" name="mySelect">
<option value="" disabled="" selected="">Select one user</option>
<option value="2" id="2 ">Name 1</option>
<option value="4" id="4 ">Name 2</option>
</select>
</div>
<div class="modal-footer">
Cancel
Ok
</div>
As we can see, the disabled and selected are replaced with
disabled="" and selected="".
The modal is still opening after the innerHTMl replacement but the select is not visible.
When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.
Is this caused by innerHTML or a bad usage from me?
By the way, I'm testing on macOS High Sierra (10.13.2) with Chrome (63.0.3239.108) which are both in the latest available update.
The website is hosted in a docker container but I don't believe the problem could come from here.
After investigating, I find that the innerHTML is not proper HTML.
It is proper HTML.
See boolean attributes:
A boolean attribute without a value assigned to it (e.g. checked) is implicitly equivalent to one that has the empty string assigned to it (i.e. checked=""). As a consequence, it represents the true value.
So the two sets of HTML express the same information and both do it correctly.
Converting HTML to a DOM and then asking the browser to convert a DOM to HTML will give you normalised HTML, not the original HTML. So the change is normal.
When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.
None of the code in the question would explain it not being displayed. That must be caused by some other part of your code.
The problem was due to the implementation of select in Materialize.
I haven't had any problems with it yet so I didn't read the documentation properly. It's written that a select must be initialized with jQuery.
So I added
$('select').material_select()
and reinitialized the modal
$('.modal').material_select()
and now everything is working.
I have the following javascript:
$(document).ready (function () {
var select = document.getElementById('party_size');
select.selectedIndex = select.options.length-1;
});
And here is the html, rendered from .erb. The amount of option fields is dynamic.
<div class="col-sm-9 col-sm-offset-1">
There will be
<select onchange="partySize.call(this, event)" name="reservation[party_size]" id="party_size">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
people in my party.
</div>
On page load, Google Chrome is returning Uncaught TypeError: Cannot read property 'options' of null and the select is not selecting the last option, which is what the javascript is designed to do.
On refresh, the error does not fire as well as the javascript works correctly (the select field properly selects the last option). In the above example, the option with the value of 3 is selected.
What do I need to change with the javascript to make it properly fire on page load?
I have made a dropdown in my site and added background image to it. I can see it fine in Firefox, but not able to see it using Chrome or IE.
Here is:
my site
On the very top you can see a search icon. Upon hovering that you can see a pop out. Inside that I am using a dropdown.
You can see the images showing fine in Firefox but not using any other browser.
:
Here is the select dropdown code I used:
My JS
function goToNewPage(dropdownlist){
var url = dropdownlist.options[dropdownlist.selectedIndex].value;
if (url != ""){
window.open(url);
}
}
My HTML
<form name="dropdown">
<label>I am Looking for</label>
<img src="http://test.techkalph.com/wp-content/uploads/2015/10/Bee-searching1.png">
<select accesskey="E" name="list">
<option selected="">Please select one</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;" value="http://www.google.com/">Japanese Companies</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;" value="http://www.google.com/">Service Provider (Non-Japanese)</option>
</select>
<input type="button" onclick="goToNewPage(document.dropdown.list)" value="Go">
</form>
You can't do it in webkit (Google) browsers. You will need an alternative solution with ul and li elements.
http://getbootstrap.com/components/#dropdowns
Sorry Got your Problem. The code you are using only works with Firefox and Webkit browsers. You either have to use JQuery UI for yuor need, or you can also some code at this link
I have what seemed to be a simple task. Get select value with jQuery. Simple way would be
jQuery('#select').val();
And this works in Chrome. But when I move to Firefox and do
console.log(jQuery('#select').val()); // result => ""
I get an empty string. I've tried jQuery('#select option:selected').val(); and this also works with Chrome, but Firefox still returns empty string.
This select is generated by jquery-ui autocomplete and it has structure like this
<select id="select" class="js-SelectList" name="selSelect" style="display:none;">
<option value=""></option>
<option value="Apple"></option>
<option value="Microsoft" selected="selected"></option>
<option value="Google"></option>
</select>
When I add value to first option and I get it's value, so aside from Microsoft option being selected, jQuery in Firefox still regards first option as selected.
Any idea why
On the selecting a value from a drop down list, I wan't another hidden element to show up.
I'm using the following code:
$('#ddd').change(function() {
$("#divoption237").show(300);
});
<div id="option236" class="option">
<select id="ddd" value="236" name="option[236]">
<option value=""> --- Selecteer --- </option>
<option data-id="49" value="40">Hond</option>
<option data-id="50" value="41">Kat</option>
</select>
</div>
This all works fine in firefox, chrome and IE on my desktop. However I've run into some weird problem on my android phone in chrome. Whenever I select a value, for example Hond, it won't show up as being picked. So the user will still see -- Selecteer -- on his/her screen. The value is selected however and will be send if the form is sent. If I change show(300) to show(), the value is shown to the user. I'd like to use the animation though. Does anyone have a solution to this problem?