We Keep Coding

create reset value button on select2

im using select2 and try to create a reset button for each select. i have 6 select.
my script is like this
$('.deggre').on('change', function() {
var deggre = $( this ).val();
var span = $("#dropdownMenu1").find('span').clone(); // Copy 'X' span.
$("#dropdownMenu1").text(deggre); // Insert text first.
$("#dropdownMenu1").append(span); // Then, append the 'X' span.
if($(this).val() == "")
$('#dropdownMenu1').css({"display": "none"});//value is none then hide
else
$('#dropdownMenu1').css({"display": "inline-block"});//have value then show
});
$("#dropdownMenu1").click(function(){
$(".deggre").val("");
});
my script didnt work for this case. how to solve this problem?
i need to show the button when we choose option on select2, and give innerHtml to the button. and then when the button click, its will reset his own select then the button is gone cause it didnt get the value.
heres my jsfiddle
https://jsfiddle.net/acvxeq8x/2/

You need to trigger the change
$("#dropdownMenu2").click(function(){
$(".position").val("").trigger('change');
});
I have updated your fiddle: https://jsfiddle.net/acvxeq8x/3/

Here is the simplified and minimal version of your code which is pretty straight forward. The code below seems long because of comments added within for explanation. Hope you will ignore them once you understand.
HTML Changes
<div class="wrap">
<!--Remove everything within wrap div and keep one copy of button in js to dynamically
construct the button tag-->
</div>
New CSS added
button.btnspl{
margin:10px;
/*Bit styling for dynamically created buttons*/
}
JS Changes
//Bind single change event to all your select element
$('.deggre,.position,.year').on('change', function() {
var ctrl=$(this); //reference for current element
var ctrlClass=ctrl[0].classList[0]; //get the first class which will be the class given
//to your original select element like deggre, position, year etc.,
$('button.btnspl[data-control="'+ctrlClass+'"]').remove();
//Since your select element is single select type, I hope you want to keep only one tag
//for each select. So, you remove other tags with above line
if(ctrl.val() == "")return; //return if value is empty, you aren't creating anything
var btn=$('<button class="btn btn-grey btnspl" type="button"><span class="glyphicon glyphicon-remove"></span></button>');
//Button copy from your wrap div
var option = $('<span>'+ctrl.val()+'</span>');
//get the selected option and place it in span
var span = $(deggre).insertBefore(btn.find('span'));
//insert the above created span before the glyphicon-remove in button
btn.attr('data-control',ctrlClass);
//the created button should have information about the control which created it
//so wrapping the ctrlClass [deggre, year, position] into data-* attribute of created button
//this will be used to remove particular button and clear its respective select,
//on different scenarios
$('.wrap').append(btn);
//append the button to .wrap div
});
//attaching close click event to glyphicon-remove.
//Read about event-delegation for dynamically created elements
//button is dynamically created here
$('.wrap').on('click','.glyphicon-remove',function(){
var ctrl=$(this).closest('.btn');
//get the parent of the clicked remove icon using closest
var ctrlClass=ctrl.attr('data-control');
//get its data-control attribute added during creation
$('.'+ctrlClass).val("").trigger('change');
//empty its value and trigger change
ctrl.remove();
//remove the control
})
JSFiddle DEMO

Setting radio button checked true on button click

I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later)
<td class="choice-option">
<input type="radio" name="trainChoice" id="cheese0032" >
<p>10€</p>
</td>
<td class="choice-option">
<input type="radio" name="trainChoice" id="cheese0033" >
<p>7€</p>
</td>
For the input tag I was thinking of putting an onclick event on the td like:
onclick="checked()==true;"
Also I was thinking an onclick for the and send it to a .js with a function to switch the radio button to true.
When the button is clicked the radio button doesn't toggle to true. How do I make it do that?
Any advice would help greatly, thanks in advance!

Here is an example : http://jsfiddle.net/xhhLja7m/
$(".choice-option").click(function()
{
$(this).find('input[type=radio]').prop("checked", "true");
})

The radio button isn't necessarily required to achieve this. You might apply a class name (e.g. 'selected') to a td when it is clicked and remove this class from all td's at the same time. In this way you get the effect of one td being selected at any time. In jQuery:
$('.choice-option').click(function() {
$('.selected').removeClass('selected');
$(this).addClass('selected');
}
Where you will apply your selected styles with CSS to the class of 'selected'.
Edit: However, to use the radio buttons as you would like to then you could do this:
$('.choice-option').click(function() {
$(this).find("input[name='trainChoice']").prop('checked', true);
}

jquery get value of checked radio button on load or change

Got this script that gets the value of a checked radio button and prints it out in another tag. It works perfectly when you click a radio button, but I've realized that I need to have some of the radio buttons checked by default.
How do I change this script so that it will output the values of already checked radio buttons on page load as well?
$("input[type='radio']").click(function(){
var radioValue = $(this).val();
if(radioValue){
$(this).closest('section').find('h2 .value').text(radioValue);
}
});
Fiddle: https://jsfiddle.net/tactics/bykf31e6/4/

You can use the :checked selector to find all the checked :radio elements on load, and the loop over them to set the value of the related .value element. Try this:
$(":radio:checked").each(function() {
$(this).closest('section').find('h2 .value').text(this.value);
});
Example fiddle
Note that you should use the change event for binding to radio and checkbox elements to cater for those who navigate websites using their keyboards. Also, if you remove the check that the radio element has a value (which is redundant as they should always have a value) you can simplify the code:
$("input[type='radio']").change(setText); // when user selects
$(":radio:checked").each(setText); // onload
function setText() {
$(this).closest('section').find('h2 .value').text(this.value);
}
Example fiddle

Selection panel - javascript radio button groups

I'm looking for a way to modify a page like this>
http://speckyboy.com/demo/digg-style-radio-buttons/index.html
so users can highlight one selection per row, IOW 8 radio button groups using a comparable visual style, not the traditional looking radio button controls.
I've tried nearly all the suggestions in stackoverflow I could find for handling radio button groups the last few days, but I clearly don't know enough js to adapt those suggestions properly. Can anyone help?

Can't you use the same id for all the radio buttons so that they work as a single entity? Then you can place them wherever you like.

You should use class(not ID, id must be unique on the page).
1 You can get all radio buttons
$('.class')
2 Now you can use each More details here http://api.jquery.com/each/
$('.class').each(function(index) {
// Add to element
});
3 To add you can with
http://api.jquery.com/add/
http://api.jquery.com/appendTo/
http://api.jquery.com/append/
http://api.jquery.com/html/

Just use a class for your elements - not sure if you were using radio buttons in the background or not like the example you posted
Minimized html
<div id='group1' class='radio'>
Group 1
<input type='radio' name='test'/>
</div>
<div class='row'>
<a href='#' class='c'>group 1a</a>
</div>​
jQuery
$('.row a').click(function(e){
e.preventDefault();
var $this = $(this);
$this.addClass('sel') // add class to currently clicked anchor
.siblings() // get siblings
.removeClass('sel'); // remove class from siblings
$('.radio').eq($('.row').index($this.parent())) // <-- get row of radios equal to this row
.find('input[type=radio]') // find the inputs radios under this
.eq($this.index()) // get radio with same index as clicked anchor
.click(); // trigger click
});​
http://jsfiddle.net/Lupw9/

JQuery, Show / hide a div based on dynamic radio buttons aka radio34 etc?

I'm producing a page dynamically and I have several sets of radio buttons. I need to use the record id in the id tag of the radio buttons. e.g.
<input type="radio" name="review_flag1797" id="review_flag1797"
value="n" checked="checked" />
How can I produce a single JQuery function to handle showing / hiding of my div. My radio buttons will have three values y, n and r. When the value is n I need to hide my div and show it for y and r.
To further complicate this, the radio of the radio button can set to a different value when its written.
EDIT
<div id="my_content1797">
content
</div>

I suggest you use a data-* attribute to store the ID of the set, just to make life a bit easier, maybe also give those radio buttons a common class:
<input ... class="someClass" ... data-id="1797" ... />
Then all you have to do is:
$('.someClass').change(function() {
if(this.checked) {
$('#my_content' + $(this).data('id')).toggle(this.value !== 'n');
}
});

I believe you want the jQuery toggle() method.
http://api.jquery.com/toggle/
onclick="$('#my_content<%=record_id%>').toggle(this.checked);"

You can hide the parent div using this statement
$("input[value='n']").parent().hide();
To show, give
$("input[value!='n']").parent().show();
You have to give this after the statements that add radio buttons dynamically, and also in the change handler of radio inputs. You can put these statements in a function and invoke it.
Also try http://api.jquery.com/closest/ if the div is not parent. This also selects parent.
$("input[value='n']").closest(...).hide();