We Keep Coding

Change a options value when selected from options

i have a drop-down that has values which are exceeding the current div's width. i want to show only a part of the text when that option is selected. i tried extending the width but the form structure is getting messed up.
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
how can i achieve this using jQuery ?
the expected output is that when the option $2.00/month(12 months) is selected it shows as $2.00/month in the drop-down.

The solution comes with the onchange and onmousedown event. Using jQuery's selectors we can get the selected option and change its display HTML.
//you really don't need jQuery, but we can wrap it in there.
//wrap in ready function to make sure page is loaded
$(document).ready(function() {
$("select#g-suite-pac-id").on("change", function() {
var text = $(this).children("option").filter(":selected").text()
var edited = text.match(/^.+?\/month/); //use regex | ^ start, .+? lazy search for everything until /month
//save
$(this).children("option").filter(":selected").data("save", text);
//change
$(this).children("option").filter(":selected").text(edited);
});
$("select#g-suite-pac-id").on("mousedown", function(e) {
//restore a saved value
var selected = $(this).children("option").filter(":selected");
if (selected.length > 0)
{
if (selected.data("save"))
{
selected.text(selected.data("save"));
selected.removeData("save");
}
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>

Set width of select component to any fixed width like below:
<div class="calci-input">
<select id="g-suite-pac-id" name="g-suite-package" style="width:96px">
<option value="2.40">$2.40/month</option>
<option value="4.00">$4.00/month</option>
<option value="2.00">$2.00/month(12 months)dffsdfsdfdsfsdfdsfdsfsd</option>
<option value="3.33">$3.33/month (12 months)</option>
</select>
</div>
try above code, it shows text that can fit in 96px width.

javascript enable and disable a combobox

I am a beginner in java-script , what I am doing right here is trying to make my combo-box named "dale" to enable and disable when i select "Reasons Specific Categorized" from my combo-box named "repSelect" but i keep getting an error on my java-script.
function makeEnable(value){
if(value=="rep4"){
var x=document.getElementById("dale")
x.disabled=false
}else{
var x=document.getElementById("dale")
x.disabled=true
}
}
</script>
</script>
<select onChange="makeEnable(value)" name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte" >
</form>
My modification But dosent work
function makeEnable(){
var e = document.getElementById("repSelect");
var strUser = e.options[e.selectedIndex].value;
if(strUser=="rep4"){
document.getElementById("dale").disabled=false;
}else{
document.getElementById("dale").disabled=true;
}
}

You are using the .getElementById() method, but your element doesn't have an id defined. Add an id in the html:
<select id="dale" name="dale">
You may also need to modify the call to your function in the first select's onchange handler, to pass this.value instead of just value:
<select onChange="makeEnable(this.value)" name="repSelect">
You can also substantially simplify your function as follows:
function makeEnable(value){
document.getElementById("dale").disabled = value!="rep4";
}
Demo: http://jsfiddle.net/3t16p5p9/
EDIT: I just noticed that you had the jquery tag on your question. To use jQuery, remove the inline onChange= attribute and then add this to your script:
$(document).ready(function() {
$("select[name=repSelect]").change(function() {
$("#dale").prop("disabled", this.value!="rep4");
}).change();
});
This binds a change handler to the first select, and then calls it immediately so that the second one will be appropriately enabled or disabled when the page loads (as requested in a comment).
Demo: http://jsfiddle.net/3t16p5p9/2/

Actually you are using document.getElementById but your combobox doesn't have an Id.
Thats the reason its not working.
Instead of adding onchange in the html, use as below:
<select id='repselect' onchange=makeEnable() name="repSelect">
<option value="rep1">Employee</option>
<option value="rep2">Category Reasons Overall </option>
<option value="rep3">Department Overall </option>
<option value="rep4">Reasons Specific Categorized </option>
</select>
<select id="seldale" name="dale">
<option value="rep1">dale</option>
</select>
<input class="button" type="submit" value="Generar Reporte"/>
$('#repselect').change(function(){
if(this.value=="rep4"){
var x= document.getElementById("seldale")
x.disabled=false
}else{
var x =document.getElementById("seldale")
x.disabled=true
}
});

Javascript jQuery Hide Form Items Based on Select Item

I am trying to make a form in which when someone selects "Other" as their title, they get a box appear to input the title. The first part of my script works in order to make the div hidden to begin with but I can't quite get the second part to work in which selecting "Other" makes a text box appear.
Any help would be appreciated.
Here is my HTML:
<div>
<label for="title" class="label">Title</label>
<select name="title" id="title">
<option></option>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss.</option>
<option value="ms">Ms.</option>
<option value="dr">Dr.</option>
<option value="lady">Lady.</option>
<option value="rev">Rev.</option>
<option value="sir">Sir.</option>
<option value="other">Other</option>
</select>
<input name="other_title" style="margin-left:10px;" type="text" id="other_title" size="10">
</div>
Here is my Javascript/jQuery:
<script>
jQuery(function( $ ) {
$('#other_title').hide('fast');
$(function() {
if ($('#title option:selected').text() == 'other') {
$('#other_title').show('fast');
}
}); // end function
});
</script>

Would this be of any help?
$('#title').on('change', function() {
if ($(this).val() == 'other') $('#other_title').show('fast');
else $('#other_title').hide('fast'); // This too?
});
Edit: Fixed syntax error. :p

Try using change event and replacing
if ($('#title option:selected').text() == 'other')
with
if ($('#title>option:selected').text() == 'other')
You can refer the plunkr for reference:
https://plnkr.co/edit/R2w25NEwUbiw00r2lEs3

Altering .load using user input

Is is possible to swap a .load text with one that can be edited by a user using form input or something similar? Basically I'm trying to write a code that fetches information using the div IDs (unique per emp) that hold their information within tables within multiple HTML documents for many years.
Example:
.load('day.html #empId')
the "day" and "empid" part of .load can be changed on the user end.
[Link] [ID] submit
then it runs the rest of the script.
The part of the script I'm trying to make adjustable:
$('a').click(function() {
$('#metrics').load('day.html #empId', function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
})
});
I'm not sure if I explained it clear enough(new to jquery)

Get the selected options of two form select elements, combine into string and insert them into the jQuery .load function.
$('a').click(function() {
var ds = $('#datasources option:selected').text();
var empId = $('#empIds option:selected').text();
$('#metrics').load(ds + '.html #' + empId, function() {
$(this).hide()
.appendTo('#main')
.slideDown(500);
});
return false;
});
And the HTML affected:
<div id="main">
<h1 id="metrics">Metrics</h1>
</div>
JSFiddle: http://jsfiddle.net/a8dTR/ (Open the console to see what's going on. This will give an error because the loading won't work on JSFiddle but you can see it's send the correct argument.)

FIXED IT!!!!!! I'm pretty sure its terrible practice, but it gets the job done(tried it with multiple docs and ids). If anyone has suggestions for a better way I'm all ears
I know it's pretty bare and basic, but here's the code in case anyone else wanted to do something similar
I put back in $<'div id= metrics'/> in order to open it in a new div tag appended to #main
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
$('a').click(function() {
var pD = $('#period').val();
var wD = $('#week').val();
var dD = $('#day').val();
var eD = $('#empId').val();
$('<div id"metrics" />').load(
pD
+ wD
+ dD
+ eD, function(){
$(this).hide()
.appendTo('#main')
.slideDown(1000);
});
});
});
</script>
I then removed then .html # from the function and just added it in as a value to #empId options
<form>
<select class="dates" id="period">
<option value="p00"class="emp">Period</option>
<option value="p01">1</option>
<option value="p02">2</option>
<option value="p03">3</option>
<option value="p04">4</option>
<option value="p05">5</option>
<option value="p06">6</option>
<option value="p07">7</option>
<option value="p08">8</option>
<option value="p09">9</option>
<option value="p10">10</option>
<option value="p11">11</option>
<option value="p12">12</option>
<option value="p13">13</option>
<option value="p14">14</option>
</select>
<select class="dates" id="week">
<option Value="w00"class="emp">Week</option>
<option value="w01">1</option>
<option value="w02">2</option>
<option value="w03">3</option>
<option value="w04">4</option>
<option value="w05">5</option>
<option value="w06">6</option>
</select>
<select class="dates" id="day">
<option value="d00"class="emp">Select Day or Leave Blank for Week</option>
<option value="d01">1</option>
<option value="d02">2</option>
<option value="d03">3</option>
<option value="d04">4</option>
<option value="d05">5</option>
<option value="d06">6</option>
<option value="d07">7</option>
</select>
<select id="empId">
<option class="emp">Employee ID</option>
<option value=".html #JXS0001">John Smith</option>
</select>
Load Metrics
</form>
</div>
<div id="main">
<h1>Metrics</h1>
</div>
I still have a lot of bedazelling to do(such as making the emp id dynamic and editable from a separate html) but that's the fun part(and I know how haha). Anywho thanks a million for helping this newb out #bloodyKnuckles

Adding/removing select options with jQuery not working in IE

When the first dropdown is selected, I'm trying to dynamically update the options in the second dropdown. It's working fine in FF, Chrome etc but doesn't work in IE 8/9 and I don't understand why. Here's a jsFiddle
<div class="custom-field">
<label for="dropdown1">Select country:</label>
<select id="dropdown1" name='properties[country]'>
<option value="USA">USA</option>
<option value="JAPAN">JAPAN</option>
</select>
</div>
<div class="custom-field">
<label for="dropdown2">Select font:</label>
<select id="dropdown2" name='properties[font]'>
<option class="us" value="font1">Font1</option>
<option class="us" value="font2">Font2</option>
<option class="us" value="font3">Font3</option>
<option class="jp" value="font4">Font4</option>
<option class="jp" value="font5">Font5</option>
<option class="jp" value="font6">Font6</option>
</select>
</div>
function showFont(fontOpt){
if (jQuery('#dropdown1').val() === 'USA'){
var showOptions = fontOpt.filter('.us');
} else {
var showOptions = fontOpt.filter('.jp');
}
jQuery('#dropdown2').html(showOptions);
jQuery('#dropdown2').prop('selectedIndex', 0);
}
$(document).ready(function() {
// get the child elements of font dropdown
var fontOptions = $("#dropdown2").children('option');
$("#dropdown2").html('');
showFont(fontOptions);
$('#dropdown1').on("change", function(e){
showFont(fontOptions);
});
});

$("#dropdown2").html('');
problem is with this line. Remove this line and your code will work fine.
Instead of this you may use
$("#dropdown2").children('option').remove();

Is this your HTML code above? If so, then you need to put script = 'text/javascript' from function showFont to the end. This makes the computer read the code as javascript and not HTML which i think your asking it to do. Hope this helps.

Comment the following line in jquery;
//$("#dropdown2").html('');
it will work.

You can use short method like below:
var fontOptions = $("#dropdown2").children('option');
$("#dropdown2").html('');
Instead of
var fontOptions = $("#dropdown2").children('option').remove();