Jquery doesnt work in my website

Question

I have this jquery code but its not working for some reason i tested the code in JSFiddle works fine why is not working in my page. I google similar problems but none of them help me identify the issue.

I added Jquery on the head part as

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/jquery-latest.min.js"></script>

Here is html part

<select id="2t2" style="">
  <option value="0"></option>
  <option value="1">1%</option>
  <option value="2">2%</option>
  <option value="3">3%</option>
  <option value="4">4%</option>
  <option value="5">5%</option>
</select>

<select id="2t3" style="">
  <option value="0"></option>
  <option value="1">1%</option>
  <option value="2">2%</option>
  <option value="3">3%</option>
  <option value="4">4%</option>
  <option value="5">5%</option>
</select>

Here is Jquery code

<script type='text/javascript'> 
  var i=$('#2t2'),x=$('#2t3'),a,b;
  $(i).change(function(){
    a=i[0]; b=x[0];
    if(a.selectedIndex>b.selectedIndex) {
       b.selectedIndex = a.selectedIndex;
     }
    });
 $(x).change(function(){
   a=i[0]; b=x[0];
    if(b.selectedIndex<a.selectedIndex) {
     a.selectedIndex = b.selectedIndex;
    }
   });
 </script>

@miparnisari no that is correct, when you prefix with `//` it will use the same protocol as the page you're viewing it from. So it will be https or http correctly depending on if your site is http or https. It will cause problems when you view the html from your local filesystem, since the protocol is `file://`. — mash, Nov 28 '15 at 23:48
Just seem like there should be [an easier way to do that](http://jsfiddle.net/05jfu9nL/) — adeneo, Nov 29 '15 at 00:03

score 2 · Accepted Answer · edited May 23 '17 at 12:15

Why you're using two versions, that will create a conflict, remove the first include, use just :

<script src="//code.jquery.com/jquery-latest.min.js"></script>

If you want two versions use jquery noconflict mode, see Can I use multiple versions of jQuery on the same page?.

Note : You should put your code inside ready() fucntion.

$(function(){
    var i=$('#2t2'),x=$('#2t3'),a,b;
    $(i).change(function(){
        a=i[0]; b=x[0];
        if(a.selectedIndex>b.selectedIndex) {
            b.selectedIndex = a.selectedIndex;
        }
    });
    $(x).change(function(){
        a=i[0]; b=x[0];
        if(b.selectedIndex<a.selectedIndex) {
            a.selectedIndex = b.selectedIndex;
        }
    });
});

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<select id="2t2" style="">
  <option value="0"></option>
  <option value="1">1%</option>
  <option value="2">2%</option>
  <option value="3">3%</option>
  <option value="4">4%</option>
  <option value="5">5%</option>
</select>

<select id="2t3" style="">
  <option value="0"></option>
  <option value="1">1%</option>
  <option value="2">2%</option>
  <option value="3">3%</option>
  <option value="4">4%</option>
  <option value="5">5%</option>
</select>

Hope this helps.

`` only but no luck. thanks – user5225773 Nov 28 '15 at 23:50 — user5225773, Nov 28 '15 at 23:50
Try to use reay function, check my update. – Zakaria Acharki Nov 28 '15 at 23:52 — Zakaria Acharki, Nov 28 '15 at 23:52

score 2 · Answer 2 · answered Nov 28 '15 at 23:45

with this two lines

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>

you bound jQuery twice to your site. use latest or version 1.11.0 but not both ;-)

after that, you should work with the onload event.

wrap your JS-Code with

$(document).on('load'function() {
    // WRITE YOUR CODE HERE
});

i also found following failure:

var i=$('#2t2') is already a jQuery object. change the line

$(i).change(function(){

to

i.change(function(){

do the same for the variable x.

Jquery doesnt work in my website

2 Answers2