How do I handle jquery within the html page? Using a two-list as an example

Question

I know that best practice is to split up your html coding into multiple smaller files, however I am working in a unique environment where all the code must be in a single html page.

I am trying to get a two-list multiple selection function working, but cannot seem to convert the code I found here, JSfiddle, into my one page html format.

I tried the below, but while the CSS is working, the script is not.

$("#btnLeft").click(function() {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
});

$("#btnRight").click(function() {
    var selectedItem = $("#leftValues option:selected");
    $("#rightValues").append(selectedItem);
});

$("#rightValues").change(function() {
    var selectedItem = $("#rightValues option:selected");
    $("#txtRight").val(selectedItem.text());
});

SELECT,
INPUT[type="text"] {
    width: 160px;
    box-sizing: border-box;
}

SECTION {
    padding: 8px;
    background-color: #f0f0f0;
    overflow: auto;
}

SECTION>DIV {
    float: left;
    padding: 4px;
}

SECTION>DIV+DIV {
    width: 40px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div>
    <select id="leftValues" size="5" multiple></select>
</div>
<div>
    <input type="button" id="btnLeft" value="&lt;&lt;" />
    <input type="button" id="btnRight" value="&gt;&gt;" />
</div>
<div>
    <select id="rightValues" size="4" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <div>
        <input type="text" id="txtRight" />
    </div>
</div>
</section>

I found a way to do this without jQuery, thanks for all the help! — Ni Yao, Apr 04 '18 at 18:59

score 1 · Answer 1 · edited Apr 03 '18 at 20:21

1

so far the code looks good for me, but you aren't loading jquery! However you need to include jQuery javscript file. eg.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Paste this little code snippet before your first <script> tag and it should work like in the JSfiddle Version.

edited Apr 03 '18 at 20:21

Steven Black

1,988
1
15
25

answered Apr 03 '18 at 20:00

xolf

17
3

score 0 · Answer 2 · answered Apr 03 '18 at 20:02

0

Try adding the jQuery library through a CDN, by adding a <script> tag in your <head>

Example:

<head>
  <style>
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

answered Apr 03 '18 at 20:02

riuseche

34
5

How do I handle jquery within the html page? Using a two-list as an example

2 Answers2