js + html + css, czemu nie działa?

0

Dobry wieczór,
chciałem ogarnąć skrypcik z javascriptem, jednak nie umiem go widocznie zaimplementować odpowiednio (a jeśli chodzi o js i css jestem totalnym laikiem..)
konkretniej:
chciałem użyć tego: http://jsfiddle.net/ZTs42/2/
więc zrobiłem taki plik:

<html>
<head>
<style>
 .selectboxit, .selectboxit-container .selectboxit-options {
  width: 600px; /* Width of the dropdown button */
  border-radiu:0;
  max-height:200px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}

</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
		$(function(){

			$("#testselectset").selectBoxIt({
				theme: "default",
				defaultText: "Make a selection...",
                autoWidth: false
			});
			$("#testselectset").change(function(){
				alert("You selected: "+this.value+" from the Selectboxit plugin");
			});
			
		});
		</script>

</head>
<body>
    <section style="background-color:rgb(237.247.249);">
    <h2>Test of select menu (SelectboxIt plugin)</h2>
    <select name="select_this" id="testselectset">
        <option value="01">Option 1</option>
        <option value="02">Option 2</option>
        <option value="03">Option 3</option>
        <option value="04">Option 4</option>
        <option value="05">Option 5</option>
        <option value="06">Option 6</option>
        <option value="07">Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
        <option value="08">Option 8</option>
        <option value="09">Option 9</option>
        <option value="10">Option 10</option>
    </select>
    </section>

</body>
</html>

natomiast po otwarciu działa mi jedynie kod z html'a...
jeśli bym umieścił dodatkowy skrypt na zwyczajny alert - on wtedy działa, reszta nadal nie.
Dlaczego tak się dzieje i co robię źle?

0

Z złym miejscu umieściłeś skrypt, dodaj go tuz przed znacznikiem </body>

0
Maciej Cąderek napisał(a):

Z złym miejscu umieściłeś skrypt, dodaj go tuz przed znacznikiem </body>

<html>
<head>
<style>
 .selectboxit, .selectboxit-container .selectboxit-options {
  width: 600px; /* Width of the dropdown button */
  border-radiu:0;
  max-height:200px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}

</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
</head>
<body>
    <section style="background-color:rgb(237.247.249);">
    <h2>Test of select menu (SelectboxIt plugin)</h2>
    <select name="select_this" id="testselectset">
        <option value="01">Option 1</option>
        <option value="02">Option 2</option>
        <option value="03">Option 3</option>
        <option value="04">Option 4</option>
        <option value="05">Option 5</option>
        <option value="06">Option 6</option>
        <option value="07">Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
        <option value="08">Option 8</option>
        <option value="09">Option 9</option>
        <option value="10">Option 10</option>
    </select>
    </section>
<script>
		$(function(){

			$("#testselectset").selectBoxIt({
				theme: "default",
				defaultText: "Make a selection...",
                autoWidth: false
			});
			$("#testselectset").change(function(){
				alert("You selected: "+this.value+" from the Selectboxit plugin");
			});
			
		});
		</script>
</body>
</html>

bez zmian. :(

0

No bo jeszcze przdałoby się załadować wtyczkę, której uzywasz ;)

Zobacz sobie External Resources na jsfiddle.

0
Maciej Cąderek napisał(a):

No bo jeszcze przdałoby się załadować wtyczkę, której uzywasz ;)

czyli co konkretnie jeszcze zrobić?
jquery zaimportowałem zdaje się... mówiłem, że jestem laikiem jak chodzi o js'a

#Edit rzeczywiście tam coś jestw tych external resources.. rozumiem, że mam to zaimportować tak samo jak jquery? :)

0

mały update... zawija tekst... ale menu otwiera się całe od razu po załadowaniu strony i jest w formie tekstowej. co tym razem jest nie tak?
title

    <html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.css"></script>
	<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.3.0/jquery.selectBoxIt.min.js"></script>
	<style>
.selectboxit-container .selectboxit, .selectboxit-container .selectboxit-options {
  width: 200px; /* Width of the dropdown button */
  border-radius:0;
  max-height:240px;
}

.selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}

</style>
</head>
	<body>
	
    <section style="background-color:rgb(237.247.249);">
    <h2>Test of select menu (SelectboxIt plugin)</h2>
    <select name="select_this" id="testselectset">
        <option value="01">Option 1</option>
        <option value="02">Option 2</option>
        <option value="03">Option 3</option>
        <option value="04">Option 4</option>
        <option value="05">Option 5</option>
        <option value="06">Option 6</option>
        <option value="07">Option 7 with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
        <option value="08">Option 8</option>
        <option value="09">Option 9</option>
        <option value="10">Option 10</option>
    </select>
    </section>

					<script>
				$(function() {
				console.log( "document loaded" );
				$("#testselectset").selectBoxIt({
				theme: "default",
				defaultText: "Make a selection...",
                autoWidth: false
				});
				$("#testselectset").change(function(){
				alert("You selected: "+this.value+" from the Selectboxit plugin");
				});
				});
				</script>
			</body>

1 użytkowników online, w tym zalogowanych: 0, gości: 1