I have made my own select dropdown, where on dropdown there are checkboxes:
---Select----
-option1-
-option2-
-option3-
For users ony the Select is showed but when user clicks it shows the options (like normal form's select). Option are checkboxes. Now what I would like to do is get the labels of those checkboxes when users clicks them and pass 开发者_JS百科it to that "select". Also the biggest thing is that how can I reset the text back to "Select" if user deselects all the checkboxes?
The JS for that custom select is just this:
$('.custom-select').click(function() {
$(this).children('.custom-select-drop').toggleClass('not-showed');
)};
When user checks one of the checkbox the checkbox get selected class if that info is any help.
EDIT: The html:
<div class="custom-select">
<span class="selectTitle">Something</span>
<div class="custom-select-drop not-showed">
<label for="check1">
<input type="checkbox" class="ch" id="check1" />Check1
</label>
<label for="check2">
<input type="checkbox" class="ch" id="check2" />Check2
</label>
<label for="check3">
<input type="checkbox" class="ch" id="check3" />Check3
</label>
Now let's say user clicks the checkboxes id check2 and check3.. I would like to get those label texts (Check2 and Check3) and pass it to inside .. replace the Something text. And if user deselect the checkboxes the selectTitle text would change to default Something.
If I correctly understand the task, this solution may be helpful
sample HTML:
<select id="select_element">
<option id="default"> - select - </option>
</select>
<div>
<label><input type="checkbox" class="checkboxes" value="someval1">Box value 1</label><br>
<label><input type="checkbox" class="checkboxes" value="someval2">Box value 2</label><br>
<label><input type="checkbox" class="checkboxes" value="someval3">Box value 3</label><br>
<label><input type="checkbox" class="checkboxes" value="someval4">Box value 4</label><br>
</div>
Checkboxes manipulation code:
$(document).ready( function() {
var default_opt = false;
$(".checkboxes").change( function() {
var opt_id = 'opt' + $(this).val();
if( $(this).is(":checked") ) {
// Saving default value
if( !default_opt ) {
default_opt = $( '#select_element > #default').clone();
$( '#select_element > #default').remove()
}
var text = $(this).parent().text().trim(); ///< Getting trimmed label's text
var item = $('<option></option>').attr({ id: opt_id, value: text }).text( text ); ///< Creating new <option> element with that text
$('#select_element').append( item ); ///< Puting this <option> to the <select>
}
else {
$( '#select_element > #' + opt_id ).remove();
// Restoring default value ( if no checkboxes are selected
if( ! $( '#select_element' ).children().length ) {
$( '#select_element' ).append( default_opt );
}
}
});
});
精彩评论