I'm facing issues trying to remove the option or hide the first option value from a ransack code.
Could you please help me to face this issue?
I have this HTML CODE
<select id="q_c_0_a_0_name">
<option value></option>
<option value="lastanem1">First Lastname</option>
<option value="lastname2">Second Lastname</option>
...
<option value="xxxxxxxxx">Other value</option>
</select>
I'm trying to remove option or hide the first option because Ransack gem is generating the following HTML code:
<select id="q_c_0_a_0_name">
<option value="name"> Filter by Name</option>
<option value="lastanem1">Filter by First Lastname</option>
<option value="lastname2">Filter by Second Lastname</option>
...
<option value="xxxxxxxxx">Filter by Other value</option>
</select>
I tried this JQuery code:
$(function(){
$("#q_c_0_a_0_name option[value=]").style.display = "none";
});
Also tried this JQuery code:
$(function(){
$("#q_c_0_a_0_name option[value=""]").style.display = "none";
});
Using :first / :first-child
$("#q_c_0_a_0_name option:first").remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="q_c_0_a_0_name">
<option value></option>
<option value="lastanem1">First Lastname</option>
<option value="lastname2">Second Lastname</option>
<option value="xxxxxxxxx">Other value</option>
</select>
You can remove first option as below, whatever value it contain.
$("#q_c_0_a_0_name").find("option").eq(0).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="q_c_0_a_0_name">
<option value="name"> Filter by Name</option>
<option value="lastanem1">Filter by First Lastname</option>
<option value="lastname2">Filter by Second Lastname</option>
...
<option value="xxxxxxxxx">Filter by Other value</option>
</select>
Try this code
$("#q_c_0_a_0_name option[value='name']").remove();
Related
Hello Guys Please Help me for this I didn't how I show select title. I want to show above When should we call you?.
please check my code Thanks:-
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
Please check online codepen code link:- https://codepen.io/anon/pen/EQBbyG
You can add a <label> in your HTML Markup.
<label for="myfirst">When should we call you?</label>
<select name="myfirst" id="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
If you use jQuery you can select all the <select> elements with a title attribute, and copy its value into the first <option>.
$("select[title] option:first-child").text(function(i, oldtext) {
if (oldtext.trim() == '') {
return $(this).parent().attr("title");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today">today</option>
<option value="tommorow">tommorow</option>
<option value="sunday" >sunday</option>
</select>
<select name="mytime" title="What time of day?">
<option class="optnoval"></option>
<option value="morning">Morning</option>
<option value="afternoon" >Afternoon</option>
<option value="evening">Evening</option>
</select>
I´m now beginning with programming and I need to know what text would be the value of this code. The JS code would be an "on click" event from this unfoldable list. Thanks you in advance!!
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>
var selectbox = document.getElementById('select');
selectbox.addEventListener('change', function(){
console.log(this.value);
//do whatever you want with the value
});
<select name="select1" data-dojo-type="dijit/form/Select" id='select'>
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>
</select>
Here is my HTML.
<select class="height_selected" id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>
I want to make the Option 2 i.e., 125 cm as selected.
I tried
$('#1 :selected').text();
But it is not working.
How can i make the option 125 selected i.e., value that have #1 as selected
Update i have another option select
I want to make only the height to be selected.
<select class="weight_selected" id="renderWeight">
<option>Select Weight</option>
<option value="1">100 kg</option>
<option value="2">125 kg</option>
</select>
Use prop to select the option.
$('#renderHeight option[value="2"]').prop('selected', true);
Code Demo
$('option[value="2"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select class="height_selected" id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>
You can also set the value using val().
$('#renderHeight').val(2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select class="height_selected" id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>
Try this : To make option selected, you can directly set value of select box to the value of option to be selected.
$(function(){
$('#renderWeight').val('2');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="weight_selected" id="renderWeight">
<option>Select Weight</option>
<option value="1">100 kg</option>
<option value="2">125 kg</option>
</select>
You can use val() by passing the option value
Live Demo
$('#renderHeight').val(2);
You can try this code
$('#renderHeight option').each(function(){
if($(this).text() =='123 cm'){
$(this).prop('selected',true)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="height_selected" id="renderHeight">
<option>Select Height</option>
<option value="1">123 cm</option>
<option value="2">125 cm</option>
</select>
I have multiple select topion.
And I need to show the selected values.with the data of '2,4,5;
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Can I use this code to get what I need.
<script type="javascript">
$(document).ready(function() {
var val_to_select = '2,4,5';
$( '#testID' ).val( val_to_select );
)};
</script>
I need output to be like this
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2" selected>test Value2</option>
<option value="3">test Value3</option>
<option value="4" selected>test Value4</option>
<option value="5" selected>test Value5</option>
<option value="6">test Value6</option>
</select>
you can pass the value in an array like this
$("#testID").val([1,2,3]);
JsFiddle
You can use this:
var data="1,2,4";
//Make an array
var dataarray=data.split(",");
// Set the value
$("#testID").val(dataarray);
// Then refresh
$("#testID").multiselect("refresh");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testID" multiple="multiple">
<option value="1">test Value1</option>
<option value="2">test Value2</option>
<option value="3">test Value3</option>
<option value="4">test Value4</option>
<option value="5">test Value5</option>
<option value="6">test Value6</option>
</select>
Also your code is not javascript but jquery.
I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?
bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select
<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task
Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>
you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box