I've tried various thing to get to what I want but i'm in the woods completely.
Let me explain what is required.
I have a php variable containing a string equal to an option's value and I need to get the option corresponding to the string to be selected.
This is the select tag.
<select name="pos" id="pos">
<option value="">POS</option>
<option value="C">C</option>
<option value="LW">LW</option>
<option value="RW">RW</option>
<option value="LD">LD</option>
<option value="RD">RD</option>
<option value="G">G</option>
</select>
Example :
$string = "G";
Resulting select tag :
<select name="pos" id="pos">
<option value="">POS</option>
<option value="C">C</option>
<option value="LW">LW</option>
<option value="RW">RW</option>
<option value="LD">LD</option>
<option value="RD">RD</option>
<option value="G" selected>G</option>
</select>
Thanks a lot guys. I've been working on this forever and got no where.
Using jQuery:
// find required element
var el = jQuery('select#pos option[value="G"]')
// or
var el = jQuery('select#pos option').filter(function(){return jQuery(this).text()=="G"})
// set 'selected' attribute
el.attr("selected", "selected");
// find selected option
var el = jQuery('select#pos option:selected');
// get value
el.text()
Related
I have a small Project website that I am learning to code with and in this website there is a Select Dropdown Menu of Music Genres
Here is a Video to help you visualise whats happening.
youtu.be/t4cJ7TCHiN8 (of the Problem)
And another video of how I can Paste "House" into the URL and get different MYSQL results
youtu.be/zf0S9WadQXo
I select a genre post the form and the reload shows me the results.
The value of the selected Option is then automatically selected by Jscript
So the Search area and its Values remain the same as before.
I have Mainly used DocumentGetElementById or jQuery to Select the value, and I am echoing PHP variables into the DocumentGetElementById function.
There is no problems with 99.9% of the values and selectable genres, they all are automatically selected without any problems.
Just 1 Problem, The value "House" Will not select.
No matter how I try it just will not select. I have of course tried other methods, including jQuery and no matter how I alter my code or method of execution.
Nothing seems to make the value "House" populate.
Here is the code. And images to help visualise the problem.
Thank you for any help you may provide.
CODE.
<select id='genregrab' name='genre' class='menusmall'>
<optgroup label='Genre'>
<option value="">All Genres</option>
<option value="EDM">EDM</option>
<option value="DnB">DnB</option>
<option value="Drum">Drum And Bass</option>
<option value="Breakbeat">Breakbeat</option>
<option value="Downtempo">Downtempo</option>
<option value="Dance">Dance</option>
<option value="Pop">Pop</option>
<option value="Disco">Disco</option>
<option value="Nu-Disco">Nu-Disco</option>
<option value="House">House</option>
<option value="Hard">Hard House</option>
<option value="Tech">Tech House</option>
<option value="Techno">Techno</option>
<option value="Deep">Deep House</option>
<option value="Future">Future House</option>
<option value="Tribal">Tribal House</option>
<option value="Tropical">Tropical House</option>
<option value="Progressive">Progressive</option>
<option value="Bass">Future Bass</option>
<option value="Bounce">Future Bounce</option>
<option value="Industrial">Industrial</option>
<option value="Electronic">Electronic</option>
<option value="Psychedelic">Psychedelic</option>
<option value="Trance">Trance</option>
<option value="Psy">Psy Trance</option>
<option value="Minimal">Minimal</option>
<option value="Ambient">Ambient</option>
<option value="Chillout">Chillout</option>
<option value="Synthwave">SynthWave</option>
<option value="Retro">Retro</option>
<option value="Hip">Hip-Hop</option>
<option value="Trip">Trip-Hop</option>
<option value="Glitch">Glitch-Hop</option>
<option value="Rap">Rap</option>
<option value="Afrobeat">AfroBeat</option>
<option value="Grime">Grime</option>
<option value="Trap">Trap</option>
<option value="Trapstep">TrapStep</option>
<option value="Dubstep">DubStep</option>
<option value="Drumstep">DrumStep</option>
<option value="Reggea">Reggea</option>
<option value="RnB">RnB</option>
<option value="Rock">Rock</option>
<option value="Metal">Metal</option>
<option value="Soul">Soul</option>
<option value="Country">Country</option>
<option value="Folk">Folk</option>
<option value="Jazz">Jazz</option>
<option value="Blues">Blues</option>
<option value="Funk">Funk</option>
<option value="World">World</option>
<option value="Gospel">Gospel</option>
<option value="Latin">Latin</option>
<option value="Ethnic">Ethnic</option>
<option value="Bollywood">BollyWood</option>
<option value="Moombahton">Moombahton</option>
<option value="Orchestral">Orchestral</option>
<option value="Classic">Classical</option>
<option value="Cinematic">Cinematic</option>
</optgroup>
</select>
Item Selected & POSTs Picked up By JScript to re-select the option
$(function(){
var genre = document.getElementById('genregrab');
var genredata = "<?php echo $genre ?>";
genre.value=genredata;
});
(Of course i initially tried the following)
document.getElementById("genregrab").value="<?php echo $genre ?>";
However unlike the others , the word "House" will not be selected.
I think its to do with the word or something, as every other word will work fine.
Same process just selecting another genre, and it works fine
As you can see , the Trance genre was selected
Just the word "House" has the problem.
And the Result after the Jscript
However , Select any other word and it works
As you can see in the image below
Any Ideas , Anybody?
I forgot to add the below code , from the GET and the MYSQL Results.
Its possible the sanitizing is effecting the variables.
The GET
if (isset($_GET['genre'])) {
$genre=$_GET['genre'];
$genre = filter_var($genre, FILTER_SANITIZE_STRING);
$genre = strip_tags($genre);
$genre = str_replace(['"',"'"], "", $genre);
} else {$genre="";}
And the MYSQL variable - Which also gets posted to the URL for GET
$genre=$row['genre'];
$genre = str_replace(['"',"'"], "", $genre);
if ($genre == "null" | $genre==" "){$genre="";}
$genresend = explode(',',trim($genre))[0];
I have created a dropdown list with links in the options, but while I'm submitting the form, the link goes into the database, instead of the value inside the option tags.
<select name="loc" id="location" onchange="setIframeSource()">
<li>TV</li>
<option value = "" disabled selected>Select Channel</option>
<option name="News" Value="News"><p>News</p></option>
<option name="ABC News" value="https://www.youtube.com/embed/w_Ma8oQLmSM">ABC News</option>
<option name="RT" value="https://www.youtube.com/embed/NvCSr7qzAAM?rel=0&showinfo=0&modestbranding=1" frameborder="0" allowfullscreen="">RT</option>
<option name="Bloomberg Live" value="https://www.youtube.com/embed/dp8PhLsUcFE?rel=0&modestbranding=1">Bloomberg Live</option>
<option name="Skynews" value="https://www.youtube.com/embed/x5EZPXBuh7g">Sky News</option>
</select>
My question here is, instead of passing the link to the database, I wanted the name of the channel, say ABC news inside the database?
I dont konw if you will need option value also.
but if you want only option name value then you can do this with jquery:
<script type="text/javascript">
$('#location').on('change', function() {
var selectedOption = $(this).find(':selected').attr('name');
setIframeSource();
});
</script>
<select name="loc" id="location">
<li>TV</li>
<option value = "" disabled selected>Select Channel</option>
<option name="News" Value="News"><p>News</p></option>
<option name="ABC News" value="https://www.youtube.com/embed/w_Ma8oQLmSM">ABC News</option>
<option name="RT" value="https://www.youtube.com/embed/NvCSr7qzAAM?rel=0&showinfo=0&modestbranding=1" frameborder="0" allowfullscreen="">RT</option>
<option name="Bloomberg Live" value="https://www.youtube.com/embed/dp8PhLsUcFE?rel=0&modestbranding=1">Bloomberg Live</option>
<option name="Skynews" value="https://www.youtube.com/embed/x5EZPXBuh7g">Sky News</option>
</select>
and then sent selectedOption variable with ajax.
these are two select boxes with same name can any one guide mehow can I pass two select boxes values as one one single array
<select multiple="multiple" name="servicetypes[]" id="servicetypes" class="form-control">
<option value="">-- Choose Service Areas --</option>
<option value="1">all over `enter code here`Andhrapredesh</option>
<option value="11">asia</option>
<option value="12">North-South America</option>
</select>
<select multiple="multiple" name="servicetypes[]" id="servicetypes" class="form-control">`enter code here`
<option value="">-- Choose Service Areas --</option>
<option value="1">all over Andhrapredesh</option>
<option value="11">asia</option>
<option value="12">North-South America</option>
</select>
I hope this will help you.
Source code
$(document).on('change', 'select[name="servicetypes[]"]', function(){
var selectedValues = {};
$('select[name="servicetypes[]"]').each(function(){
var text = $(this).children("option").filter(":selected").text();
var value = $(this).val();
selectedValues[text] = value;
});
var textValue = $('#servicetypesArray').val(selectedValues);
alert(JSON.stringify(selectedValues, null, 4));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select multiple="multiple" name="servicetypes[]" id="servicetypes" class="form-control">
<option value="">-- Choose Service Areas --</option>
<option value="1">all over Andhrapredesh</option>
<option value="11">asia</option>
<option value="12">North-South America</option>
</select>
<select multiple="multiple" name="servicetypes[]" id="servicetypes" class="form-control">`enter code here`
<option value="">-- Choose Service Areas --</option>
<option value="1">all over Andhrapredesh</option>
<option value="11">asia</option>
<option value="12">North-South America</option>
</select>
<input type="text" id="servicetypesArray" name="data[servicetypes][]" value="" hidden/>
You will have your values in a multidimensional array named 'servicetypes'
Here is a CODEPEN Demo
Always use different name or id for two different input/select in a form. When you post the form, you will get values in array format. And since you have used the same name, all the selected values from the both select box will be in the same name array called servicetypes[].
I have drop down boxes related to each other. The second dropdown values are filtered according to first dropdown box value.
Now I want to clone elements in div with class="old_div" into div with class="new_div" and add events to each new elements in div with class="new_div".
ADD
<div class="old_div" >
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
<br />
</div>
<div class="new_div">
</div>
I am able to clone elements to new div using Jquery
Jquery code:
$("#add_a").on('click',function(){
var data = $('.old_div').html();
$('.new_div').append(data);
});
$("#select1").on('change', function() {
if($(this).data('options') == undefined){
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val().trim();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
But how can i make new elements to be related to each other.
I have created fiddle http://jsfiddle.net/6YEQx/ for reference.
You are using id with select box and making duplicates of it, this is causing problem to identify select box using id in jQuery. So use class instead of id.
HTML :
<select name="select1" class="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" class="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
Also you are adding elements dynamically so need to bind change event using $(document) and on.
EDIT: also added new line in add_a button script to show all options in second select box initially.
jQuery :
$("#add_a").on('click',function(){
var data = $('.old_div').html();
$('.new_div').append(data);
// to show all options initially and remove any preselected option
$('.new_div').find('.select2:last option').show().removeAttr('selected');
});
$(document).on('change',".select1", function() {
var id = $(this).val().trim();
$(this).next('.select2').find('option').hide();
var $options = $(this).next('.select2').find('option[value=' + id + ']');
$options.show();
$options.first().attr('selected',true)
});
Demo
I have following code in a html form
<select name="category" class="input" onchange="ShowTB(this,'suggest');">
<option value="0" selected="selected">
[choose yours]
</option>
<optgroup label="Item">
<option value="SubItem1"SubItem1</option>
<option value="SubItem2">SubItem2</option>
</optgroup>
<option value="Item2">Item2</option>
<optgroup label="Item3">
<option value="SubItem4"SubItem4</option>
<option value="SubItem5">SubItem5</option>
</optgroup>
<option value="Item4">Item4</option>
<option value="Item5">Item5</option>
<option value="Item6">Item6</option>
<option value="Item7">Item7</option>
</select>
in php i get the value of field selected with:
$category = $_POST['category'];
in this mode if i select in the form ie: SubItem1 , in php i get value SubItem1 but i want also get associated label ie: Item or if i select SubItem5 i get SubItem5 but i want also get associated label ie: Item3
How to ?
Indeed, you only get the value. If you need more, just encode whatever you want into the value, for example:
<option value="Item3.SubItem5">SubItem5</option>
Alternatively, you could use javascript to catch onChange events on the select field and update a hidden input field with the desired label.
you could make the values arrays e.g.
<option value="Item3[SubItem5]">SubItem5</option>
so then your $_POST['category'] should return an array