CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
dddexxx
dddexxx

Reputation: 31

Check if select options is selected

I am running dataTables plugin for a project.

Could you please show me where I am doing it wrong (it is extremely simple and it doesn't show any errors):

<select name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class="form-control input-sm">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select>

Basically that is what I have generated. So I want to select the 50 and 100 values to all the tables on the page and show the footer of the generated tables only when these two results are selected.

I tried the following (just for value="50"):

var selected_result = $('select option:nth(2)');
var tfoot = $('tfoot');
tfoot.hide();

if (selected_result.is(':selected')) { tfoot.show(); }

Thank you

Upvotes: 0

Views: 6510

Answers (3)

RobG
RobG

Reputation: 147483

Presumably the footer is hidden by default. If you want to show the footer if either 50 or 100 are selected, then:

$(document).ready(function() {
    $('select[name=DataTables_Table_0_length]').change(function() {

        if (this.value == '50' || this.value == '100') {
            $("#tfoot").show();

        } else {
            $("#tfoot").hide();
        }
    });
});

or

$(document).ready(function() {
    $('select[name=DataTables_Table_0_length]').change(function() {
        this.value == '50' || this.value == '100'? $("#tfoot").show() : $("#tfoot").hide();
    });
});

or even:

$(document).ready(function() {
    $('select[name=DataTables_Table_0_length]').change(function() {
        $("#tfoot")[this.value == '50' || this.value == '100'? 'show' : 'hide']()
    });
});

Upvotes: 0

Anwar
Anwar

Reputation: 4246

		function showOptionValue() {
			var optionSelected = document.getElementById("select_test");
			var optionSelected_value = optionSelected.options[optionSelected.selectedIndex].value;
			
			alert(optionSelected_value);
		}
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
	</head>
	<body>
	
		<form action = "" method = "post">
			<select name = "select_test" id = "select_test" >
				<option value = "10">10</option>
				<option value = "25">25</option>
				<option value = "50">50</option>
				<option value = "100">100</option>
			</select>
			<input type = "button" value = "show option value" onclick = "showOptionValue()"/>
		</form>
	</body>
</html>

This code show you the current value of the option when clicking on the button. I let you use this one to modify the function to do what you want to do (meaning, showing your footer).

Hope it helps !

Upvotes: 1

Daan
Daan

Reputation: 2799

Use .change() then check if it's selected to either show/hide the footer.

$(document).ready(function() {
$("#tfoot").hide();
    $("select").change(function() {
        if ($("select option:nth(2)").is(":selected")) {
            $("#tfoot").show();
        } else {
            $("#tfoot").hide();
        }
    });
});

http://jsfiddle.net/rcLrf18j/

Upvotes: 1

Related Questions