I need to get the value of hidden dropdown value on change a specific dropdown and show it as an input radio button in the display. I have tried it in JSFiddle.
https://jsfiddle.net/3mf67pav/2/
jQuery("#model").on("change", function() {
alert(jQuery("#designation").val());
})
jQuery("#designation option").each(function(i, e) {
(jQuery("<input type='radio' name='r' />")
.attr("value", jQuery(this).val())
.attr("checked", i == 0)
.click(function() {
jQuery("#designation").val(jQuery(this).val());
}).add($("<label>" + this.textContent + "</label>")))
.appendTo("#r");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<select name="model" ide="model">
<option>choose option</option>
<option val="1.5inces">1.inches</option>
</select>
<select id="designation" title="Designation" name="designation" style="display:none">
<option value="">Choose Option..</option>
<option value="12">12</option>
<option value="23">23</option>
</select>
<div id="r"></div>
Related
Im trying to select an option when i choose a specific option from list above. Any help how can achieve that?
Print of frontend
The main idea is, when i choose Field_Support, select option "94" from StardardTemplateID
My actual try:
$(document).ready(function () {
setTimeout(function () {
const Action = Core.Config.Get("Action");
const SupportedActions = ["AgentTicketNote"];
if ($.inArray(Action, SupportedActions) !== -1) {
if (Action === "AgentTicketNote") {
$('#DynamicField_QueueNote').on('change', function () {
const Option = $(this).val();
if (Option === '- Move -')
$('#Subject').val('');
else if (Option === 'Field_Support')
$('#Subject').val('Nota para Field');
else if (Option === 'Field_Support')
$("#StandardTemplateID").html("<option value='94'>dados_para_field</option>");
else if (Option === 'Helpdesk')
$('#Subject').val('Nota para Helpdesk');
else if (Option === 'Sistemas_Windows')
$('#Subject').val('Nota para Sistemas');
else if (Option === 'Networking')
$('#Subject').val('Nota para Networking');
});
}
}
})
});
Here's one way. Bake the value associations into the select option elements as data-attributes. Then just reference it on the change event.
$(document).ready(function() {
$('select#DynamicField_QueueNote').change(function() {
$('select#StandardTemplateID').val($(this).find('option:selected').data('link'))
$('#StandardTemplateID_Search').val($('select#StandardTemplateID').find('option:selected').text());
$('#Subject').val($(this).find('option:selected').data('subject'))
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="DynamicFieldText Modernize" id="DynamicField_QueueNote" name="DynamicField_QueueNote" size="1">
<option value="">-</option>
<option value="- Move -" selected="selected">- Move -</option>
<option value="Field_Support" data-link='94' data-subject='Nota para Field'>Field_Support</option>
<option value="Helpdesk" data-link='' data-subject='Nota para Helpdesk'>Helpdesk</option>
<option value="Sistemas_Windows" data-link='' data-subject='Nota para Sistemas'>Sistemas_Windows</option>
</select>
<hr>
<label>Subject</label>
<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate Validate_Required" aria-required="true">
<hr>
<label for="StandardTemplateID">Text Template:</label>
<div class="Field">
<div class="InputField_Container" tabindex="-1">
<div class="InputField_InputContainer"><input id="StandardTemplateID_Search" class="InputField_Search ExpandToBottom" type="text" role="search" autocomplete="off" aria-label="Text Template:" style="width: 273.333px;" aria-expanded="true"></div>
</div>
<select class="Modernize" id="StandardTemplateID" name="StandardTemplateID" style="display: none;">
<option value="">-</option>
<option value="71">1ª_Tentativa_Contacto</option>
<option value="72">2ª_Tentativa_Contacto</option>
<option value="73">3ª_Tentativa_Contacto</option>
<option value="80">Acesso_VPN_atribuido</option>
<option value="94">dados_para_field</option>
</select>
<p class="FieldExplanation">Setting a template will overwrite any text or attachment.</p>
</div>
<!--
<select id='select1'>
<option> Choose...</option>
<option value='option1' data-link='100'> Option 1 (link to 100)</option>
<option value='option2' data-link='133'> Option 2 (link to 133)</option>
<option value='option3' data-link='94'> Option 3 (link to 94)</option>
<option value='option4' data-link='120'> Option 4 (link to 120)</option>
</select>
<select id='select2'>
<option></option>
<option value='94'>Template 94</option>
<option value='100'>Template 100</option>
<option value='120'>Template 120</option>
<option value='133'>Template 133</option>
</select> -->
You can create a conditional that checks the value of the select on change and then sets the value of the input if the value of the select equals the target value.
Using jQuery:
$(document).ready(function() {
$('#StandardTemplate').change(function() {
if ($(this).val() === '94') {
$('#text_template').val($('option[value="94"]').text())
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<select class="Modernize" id="StandardTemplate" name="StandardTemplate">
<option value>-</option>
<option value="71">1_Tentative_Contacto</option>
<option value="72">2_Tentative_Contacto</option>
<option value="73">3_Tentative_Contacto</option>
<option value="80">Accesso_VPN_atibuido</option>
<option value="94">dadios_para_field</option>
</select>
<label for="text_template">Text Template: <input name="text_template" id="text_template"></label>
</div>
Using Vanilla JS:
const sel = document.getElementById('StandardTemplate')
const input = document.getElementById('text_template')
sel.addEventListener('change', e => {
if(e.target.value === '94'){
document.getElementById('text_template').value = document.querySelector('option[value="94"]').textContent
}
})
<div id="parent">
<select class="Modernize" id="StandardTemplate" name="StandardTemplate">
<option value>-</option>
<option value="71">1_Tentative_Contacto</option>
<option value="72">2_Tentative_Contacto</option>
<option value="73">3_Tentative_Contacto</option>
<option value="80">Accesso_VPN_atibuido</option>
<option value="94">dadios_para_field</option>
</select>
<label for="text_template">Text Template: <input name="text_template" id="text_template"></label>
</div>
I have problem in removing the attribute selected in the option
my select is inside the modal when my page load option build dynamically like this
<select class="form-control" id="petselect" name="petselect">
<?php
foreach ($pest as $pet){
echo "<option value='".$pet->id."'>$pet->name</option>";
}
?>
</select>
when I edit the form the modal will show and I selected the default pet->id
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
Now when I change it to pet5 and submit the form via ajax, and my modal will hide,
when I edit again the option selected pet5 is displayed but when I view source
this is how it looks like, 2 selected attribute.
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5" selected="selected">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
this is my js to add selected attribute,when I edit the form
$('#petselect option')
.filter(function() { return $(this).val() === petID; })
.attr('selected',true);
and code for my modal when it hides.
$('#petselectmodal').on('hidden.bs.modal', function () {
$('#petselect option:selected')
.removeAttr('selected');
});
This should not be done on the <option> but on the <select> level. The Options are basically a visual indicators. The element that has the Name and thus the Value is the Select element. Use $('#petselect").val(5); and then the form will read this value instead. Plus HTML will update the Option too.
$(function() {
$("button").click(function() {
$("#petselect").val(5);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
<button>Change</button>
You can do it manually if you so choose.
$(function() {
$("button").click(function() {
$("#petselect").val("");
$("#petselect option").prop("selected", false);
$("#petselect").val(5);
$("#petselect option[value='" + 5 + "']").prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
<button>Change</button>
Looking for a cascading dropdown i found this piece of code here, which is working almost perfect for me, but i need to keep the default option in the second select-menu after changing the value in the first one.
https://stackoverflow.com/a/28902561/10391817
function filterCity() {
var province = $("#province").find('option:selected').text(); // stores province
$("#option-container").children().appendTo("#city"); // moves <option> contained in #option-container back to their <select>
var toMove = $("#city").children("[data-province!='" + province + "']"); // selects city elements to move out
toMove.appendTo("#option-container"); // moves city elements in #option-container
$("#city").removeAttr("disabled"); // enables select
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="province" onchange="filterCity();">
<option value="1">RM</option>
<option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
<option>SELECT CITY</option>
<option data-province="RM" value="1">ROMA</option>
<option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
<option data-province="FI" value="3">FIRENZE</option>
<option data-province="FI" value="4">PONTASSIEVE</option>
</select>
<span id="option-container" style="visibility: hidden; position:absolute;"></span>
You can try this code.
<select class="select" id="province">
<option value="1">RM</option>
<option value="2">FI</option>
</select>
<select class="select" id="city" disabled>
<option data-province="DEF">SELECT CITY</option>
<option data-province="RM" value="1">ROMA</option>
<option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
<option data-province="FI" value="3">FIRENZE</option>
<option data-province="FI" value="4">PONTASSIEVE</option>
</select>
<span id="option-container" style="visibility: hidden; position:absolute;"></span>
<script>
$('#province').on('change', function() {
var province = $("#province").find('option:selected').text();
$("#city option[data-province!='" + province + "']").hide();
$("#city option[data-province='" + province + "']").show();
$("#city option[data-province='DEF'").show().prop('selected', true);
$("#city").removeAttr("disabled");
});
</script>
https://jsfiddle.net/sg0t23bc/5/
how to find value from optgroup then find value option add attribute selected
Html
<select id="venue">
<option value="0">select</option>
<optgroup label="New England">
<option value="1"> NH</option>
<option value="2"> ME</option>
<option value="3"> VT</option>
<option value="4"> MA</option>
<option value="4"> CT</option>
<option value="4"> RI</option>
</optgroup>
<optgroup label="International">
<option value="100">Canada</option>
<option value="100">Texas</option>
<option value="100">Mexico</option>
</optgroup>
</select>
Jquery
var Id="1"
$('#venue').find('optgroup').each(function () {
$(this).find('option').each(function () {
var $this = $(this);
if ($this.val() == Id) {
$this.attr('selected', 'selected');
return false;
}
});
});
we want find value 1 and Which option has 1 value Add Attribute selected
why loop when you can go directly if you have the data to point it?
$("#venue")
.find("optgroup[label='New England']")
.find("option[value=" + Id + "]")
.attr("selected", true)
I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select.
My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:
<option>South KoreaUSAJapan</option>
What I can modify to display the following way if i do a multiple select?:
<option>South Korea</option>
<option>USA</option>
<option>Japan</option>
My code:http://jsbin.com/osesem/4/edit
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected").text());
$("#addCountry").append("<option>" + newC + "</option>");
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
<select multiple="multiple" size="5" id="countries">
<option value="1">South Korea</option>
<option value="2">USA</option>
<option value="2">Japan</option>
<option value="3">Italy</option>
<option value="4">Spain</option>
<option value="5">Mexico</option>
<option value="6">England</option>
<option value="7">Phillipins</option>
<option value="8">Portugal</option>
<option value="9">France</option>
<option value="10">Germany</option>
<option value="11">Hong Kong</option>
<option value="12">New Zeland</option>
<option value="13">Ireland</option>
<option value="14">Panama</option>
<option value="15">Norwey</option>
<option value="16">Sweeden</option>
<option value="17">India</option>
<option value="18">Morroco</option>
<option value="19">Russia</option>
<option value="20">China</option>
</select>
</span>
<div class="addremover">
<input class="add" type="button" onclick="addC()" value="Addd »" />
<br/>
</div>
<span>
<select id="addCountry" multiple="multiple" size="5">
</select>
</span>
use each function to loop through the text and append it..
try this
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected"));
newC.each(function(){
$("#addCountry").append("<option>" + $(this).text() + "</option>");
})
}
}
JSbin here
Or just clone the selected <option>'s
function addC() {
if ($('#countries option:selected').size() < 5)
{
$('#addCountry').append($('#countries option:selected').clone());
}
else
{
alert('you can only select 5');
}
}