I am working with laravel and in my form I am grab data to select input using some variable,
<label for="exampleFormControlSelect1">Vehicle Category</label>
<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
#foreach($model_list as $model)
<option value="{{$categories->id}}">{{$categories->id}}</option>
#endforeach
</select>
Now I am going to hide this select input and this select input is depend to other select inputs values. So, I need select automatically drop down values to above select input using some technology. How can I do this? (currently it should select manually using drop down list)
Add selected="selected" to the first option.
<select name="c_id" id="c_id" class="form-control input dynamic" data-dependent="b_id" >
{{$i = 1;}}
#foreach($model_list as $model)
<option value="{{$categories->id}}" {{($i == 1) ? "selected='selected' : ''"}}>{{$categories->id}}</option>
$i++;
#endforeach
If you need to select the first option of a select, you can do it in three ways
select.options
select.values
select.selectedIndex
For example having this form that contains the select that probably rendered blade
<form name="formName">
<label>Categories</label>
<select name="c_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>
You could try
const category = document.forms.formName.c_id;
console.log(category.value)
console.log(category.options[0].value)
console.log(category.options[category.options.selectedIndex].value)
This will show on the console:
'1'
'1'
'1'
Visit this link to try the example
To read more about select and some useful options visit this article in select and option section
Now, probably I misinterpret your question, in your comment you mention that this select is dependent on another, this is not clear to me, does it have any relation to the data attribute? If this is the case, please develop your question
Related
I want user to select a state just from this list :
<input list="states">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
but also I don't want to use <select>, i know that but I want to keep the ability to type (and search among the options) but at last, one of the options must be selected.
please help me with this. I want to use it in react
You can set the value attribute of the input with the option value you want to be selected:
<input list="states" value="Pendiente">
<datalist id="states">
<option value="Pendiente">Pendiente</option>
<option value="Frenada">Frenada</option>
<option value="Finalizada">Finalizada</option>
</datalist>
I have a page where rows can be added which include drop downs (select) fields. each one of those fields is dynamically created with an id of "drop1, drop2, drop3" etc.
I'm wanting to achieve pulling some data from mysql with ajax, problem i'm having is knowing which drop down has changed to pull the data.
ive used this to know how many select fields there are currently, but don't know how to decide which one has changed. any help is appreciated.
var myCount = $("select[id^=drop]").length;
here is the row that gets added.
var n=($('.detail tr').length-0)+1;
var tr = '<tr>'+
'<td>'+n+'</td>'+
'<td><select id="drop'+n+'" name="prodService[]"></select></td>'+
'<td id="desc'+n+'"></td>'+
'<td>Delete</td>'+
'</tr>';
The whole idea around the select input it's like any input accepts all events. Any input takes click, change, input...etc let's say we have 3 select dropdown.
How to detect if any of them has changed and get the new value
$('.select-list').on('change', function(evt) {
console.log($(this).val()); // get the select value - new value if changed
console.log($(this).attr('id')); // just for implementation purposes and debugging
});
Going further you can implement something like: When the user selects an item from a dropdown, send a request to a server to get some data. You can do that with the value="" attribute, put keyword/key-trigger (just to differentiate between them) to send different request depending on what item has been selected.
$('.select-list').on('change', function(evt) {
console.log($(this).val()); // get the select value - new value if changed
console.log($(this).attr('id')); // just for implementation purposes and debugging
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-list" name="items" id="itemsList1">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
<select class="select-list" name="items" id="itemsList2">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
<select class="select-list" name="items" id="itemsList3">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
I have a number of dropdowns like this
code:
<label for="schoolType">
Type of School <span style="color: red">*</span>
</label>
<select class="form-control" id="schoolType" name="schoolType" value="{{user.schoolType}}">
<option value="none">None</option>
<option value="public">Public</option>
<option value="private">Private</option>
<option value="homeSchool">Home School</option>
</select>
and the database field is like so
What I'm trying to accomplish
This is a select field that is filled out in registration so I want to grab the value from the database and display it in the edit profile so the users can edit their profiles and change the select if need be.
But as the user refreshes I want the option that they select to be in the select as the selected value.
For reference I am using node.js, express and the handlebars templating engine.
To solve an issue like this, I will advise you to fetch the value selected by the user before, store it in a variable and use a ternary operator to activate it. An actual example is given below.
var selectedValue = user.schoolType;
<select class="form-control" id="schoolType" name="schoolType" value="
{{user.schoolType}}">
<option value="none" selected="{{user.schoolType ===
this.value}}">None</option>
<option value="public" selected="{{user.schoolType ===
this.value}}">Public</option>
<option value="private" selected="{{user.schoolType ===
this.value}}">Private</option>
<option value="homeSchool" selected="{{user.schoolType ===
this.value}}">Home School</option>
</select>
I want edit text with a drop down box along with custom scrollbar so end user can add data explicitly or can add from drop down box. The final entered value by end user should be saved.I want this in UI development preferably angular js.
Well from what i understood , you need a text input as well as a dropdown input together.
To be frank , this is quite easy and i dont understand what caught you up in this.
So here is the code:
<input type="text"/>
<select style="width:20px;">
<option value=""></option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
Check out the jsfiddle here:
https://jsfiddle.net/kna3fj5t/
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.