Solved

Help on Jquery/Select Option

Posted on 2012-03-21
6
277 Views
Last Modified: 2012-06-21
I need help on this.

I have 2 select options and the users can transfer messages from one box to another. I need to

Prevent User to transfer  - "Special Message*" (splMsg) to "Available Fields"
Prevent User to mix and combine all messages with "Special Message" under "Selected Fields" to "Available Fields" (user can combine all messages on "Selected Field" and can transfer to "Available Fields" but cannot move "Special Message"
      

Code is given below. Ignore my styles for now.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .row
        {
            width: 800px;
            background-color: Gray;
        }      
        .fieldsTable
        {
            float: left;
            width: 200px;            
        }
         .fieldsTableArrows
        {
            float: left;
            width: 100px;            
        }
    </style>
</head>
<body>
    <form>
    <div class="row">
       
        <div class="fieldsTable">
            <label>Available Fields:</label><br />
            <select id="availMsg" name="availMsg"  multiple="multiple" class="transferList"  size="5">
                <option value="msg01">Left Message 01</option>
                <option value="msg02">Left Message 02</option>
                <option value="msg03">Left Message 03</option>
                <option value="msg04">Left Message 04</option>
                <option value="msg05">Left Message 05</option>
            </select>
        </div>
        <div class="fieldsTableArrows">
            <input type="button" id="moveLeft" value="&gt;&gt;">
            <input type="button" class="moveRight" id="moveRight" value="&lt;&lt;">
        </div>
        <div class="fieldsTable">
            <label>Selected Fields:</label><br />
            <select id="selMsg" name="selectedFields" class="transferList" multiple="multiple"  size="5">
                <option value="msg11">Right Message 01</option>
                <option value="msg12">Right Message 02</option>
                <option value="msg13">Right Message 03</option>
                <option value="msg14">Right Message 04</option>
                <option value="splMsg">Special Message*</option>
            </select>
        </div>
    </div>
    </form>
</body>
</html>

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script type="text/javascript" language="javascript">
    $(function() {
        $('#moveLeft').click(function() {
            return !$('#availMsg option:selected').remove().appendTo('#selMsg').blur();
        });
        $('#moveRight').click(function() {
            $('#selMsg option:selected').remove().appendTo('#availMsg');            
            $('#selMsg').blur();
            return false;
        });
    });
</script>
0
Comment
Question by:mahaq
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
6 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37751063
http://api.jquery.com/filter/

for example
$('#moveRight').click(function() {
  $('#selMsg option:selected').filter(function(index) {
      return $(this).val() != "splMsg";
   }).remove().appendTo('#availMsg');            
  $('#selMsg').blur();
  return false;
 });

Open in new window

0
 

Author Comment

by:mahaq
ID: 37755757
Dear "mplungjan",

Many thanks on this quick reply and possibly the solution. I need little help on alerting the user not to mix and match the "splMsg" with all other messages while transfering from Right to Left. Also I need another alert when user tries to transfer "splMsg" too. Well I just need to alert & later on use a message key.

If you can provide a solution on these, I shall accept it in complete. Thanks in advance.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 37755976
You mean
$('#moveRight').click(function() {
  $('#selMsg option:selected').filter(function(index) {
      if ($(this).val() == "splMsg") {
        alert('Please do not transfer '+$(this).text());
        return false;
      }
      return $(this).val() != "splMsg";
   }).remove().appendTo('#availMsg');            
  $('#selMsg').blur();
  return false;
 });

Open in new window

0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

Author Closing Comment

by:mahaq
ID: 37760817
Dear "mplungjan",

Many thanks for helping me out on this.
I am bothering you one last time, can you please give me an alternate way, when users select  combination of any or all messages with splMsg, then transfer be not performed and force user to only select other than splMsg. I mean I need another alert (telling users to deselect splMsg and try again), but no change to your current logic, becoz it works for me.

Thank you so much.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37760856
Sounds very complicated to have an option not selectable
What exactly do you gave that makes you want to force these issues in the user?
0
 

Author Comment

by:mahaq
ID: 37760910
Never mind, I'll stick to the last solution. Thanks again.
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Need help Creating a Powershell script 8 61
Glitching Slide Show 19 27
assigning javascript variable to php variable 8 43
Diff of the day 2 9
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question