jquery show different value from the dropdown list

Question

I having a dropdown like this

<select name="phoneCallingCode" id="phoneCallingCode" class="input">
   <option value="93">Afghanistan (+ 93)</option>
   <option value="355">Albania (+ 355)</option>
   <option value="213">Algeria (+ 213)</option>
</select>

when I select a value Afghanistan (+ 93), I just want to show +93 in the display, it that possible through jquery.

Thanks in advance.

enter image description here

Take value and concatenate it! `var result = "+" + $("#phoneCallingCode").val()`! — Dhaval Marthak, Jul 07 '14 at 10:14
Possible duplicate http://stackoverflow.com/questions/8978328/jquery-dropdown-get-value — Alex Char, Jul 07 '14 at 10:15
@Suganthan What do you mean by display? can you please elaborate? — Dhaval Marthak, Jul 07 '14 at 10:19
u mean if u select afganishtan , Textbox should have +93 correct? — Pratik Joshi, Jul 07 '14 at 10:33
Please clarify Question.You didnt tell where you want drop down value and many things .Create fiddle — Pratik Joshi, Jul 07 '14 at 10:46
Here in ur dropdown Afghanistan (+ 93) , You already have +93 ,So what u want when anyone changes from Algeria to Afganishtan ? You want double value like Afghanistan (+ 93) + 93 ? — Pratik Joshi, Jul 07 '14 at 10:50
No functionality wise no issues, I am trying to accomplish the User experience, In the dropdown I need "Afghanistan (+ 93)" while select I just need to show "93" — Suganthan Madhavan Pillai, Jul 07 '14 at 10:53
No, I 'll be double, but the requirement is to show only the callingcode, it is double for developers but not for user — Suganthan Madhavan Pillai, Jul 07 '14 at 11:06
And if I don't having that value there, again I have to go for regex to split everything, that is a overhead — Suganthan Madhavan Pillai, Jul 07 '14 at 11:07
Do u really think , that The arrow can be replaced with Text? :) Its not possible , as its HTML element by default .Max to max u can give style to arrow. :) NOT POSSIBLE — Pratik Joshi, Jul 07 '14 at 11:07

score 0 · Answer 1 · answered Jul 07 '14 at 10:35

0

Okay from my understanding you want to show number when anyone selects country in drop down.

So you can do something like this:

$('#phoneCallingCode').change(function() {

    $("option:selected", this).text($("option:selected", this).val());

});

But remember this will change selected option text too, so user may have hard time finding country name again.

Fiddle: http://jsfiddle.net/NyHts/

answered Jul 07 '14 at 10:35

Abhishek

5,649
3
23
42

you are right, but have to retain the existing value in drop down – Suganthan Madhavan Pillai Jul 07 '14 at 10:38
No you can't do like that. you will have to store text of selected option somewhere before changing it to its value. Let me see if i can provide functionality like that. – Abhishek Jul 07 '14 at 10:44
I am also trying to accomplish – Suganthan Madhavan Pillai Jul 07 '14 at 10:50
@Abhishek , did you see OP's Edit :) ? – Pratik Joshi Jul 07 '14 at 11:05
@PratikJoshi yes i did, May be have to use data-text attribute to show original value when select box is open and when closed show value. – Abhishek Jul 07 '14 at 11:11
@Abhishek , he wants to replace Arrow with Text :) Comeon its HTML element.We cant override their elements. Like we cant give Checkbox functionality to Radio button – Pratik Joshi Jul 07 '14 at 11:12
@PratikJoshi and obviously jquery don't have functions for something like on open/close select boxes. – Abhishek Jul 07 '14 at 11:14
@Abhishek i flagged question as low quality and Unclear what OP asking . He is WASTING Developer's time , by changing requirements and telling vague question which is not possible to achieve – Pratik Joshi Jul 07 '14 at 11:16
Yes, thanks. absolutely question is not clear. Flagging it too as unclear. – Abhishek Jul 07 '14 at 11:17

score 0 · Answer 2 · answered Jul 07 '14 at 10:37

0

Working demo

Code

//For starting of page
  valNum=$("#phoneCallingCode").val();
   $("#nmbr").val(valNum);

$("#phoneCallingCode").change(function(){
   valNum=$(this).val();
   $("#nmbr").val(valNum);
});

It means,Get value of selected Drop down option and Set the value of Textbox by the value in valNum variable.

And when document is ready , u need contry Number in textbox so The code //For starting of page

answered Jul 07 '14 at 10:37

Pratik Joshi

11,485
7
41
73

textbox in the sense not in separate textbox, I want in the same component – Suganthan Madhavan Pillai Jul 07 '14 at 10:41
In the question, separate textbox is to enter phone number – Suganthan Madhavan Pillai Jul 07 '14 at 10:42
You want country number in same dropdown? – Pratik Joshi Jul 07 '14 at 10:43
@Suganthan , then what is problem with Abhishek's solution – Pratik Joshi Jul 07 '14 at 10:44
Please see Abhishek's answer, but their I want to retain the existing dropdown – Suganthan Madhavan Pillai Jul 07 '14 at 10:44
Please tell What u want in Dropdown as value when i select Afgahnishan ? edit your question – Pratik Joshi Jul 07 '14 at 10:48

score 0 · Answer 3 · answered Jul 07 '14 at 10:40

0

Use as below

$('#phoneCallingCode').change(function() {
    $("#ShowNumber").val("+" +$("#phoneCallingCode option:selected").val())
});

HTML

<select name="phoneCallingCode" id="phoneCallingCode" class="input">
   <option value="93">Afghanistan (+ 93)</option>
   <option value="355">Albania (+ 355)</option>
   <option value="213">Algeria (+ 213)</option>
</select>
<input type="text" id="ShowNumber"/>

DEMO

answered Jul 07 '14 at 10:40

Amit

15,217
8
46
68

textbox in the sense not in separate textbox, I want in the same component – Suganthan Madhavan Pillai Jul 07 '14 at 10:42
Can you make a fiddle for better understand. – Amit Jul 07 '14 at 10:43
This answer is exactly similar to Pratik one. – Abhishek Jul 07 '14 at 10:46
@Abhishek I have not seen that Pratik posted same answer. – Amit Jul 07 '14 at 10:49
@AmitAgrawal , did you see OP's Edit :) ? – Pratik Joshi Jul 07 '14 at 11:06

score 0 · Answer 4 · answered Jul 07 '14 at 10:43

$('#phoneCallingCode').change(function(){
        var selectedOptionVal = $(this).val();
        var temp = "[value='"+selectedOptionVal+"']";
        var selected = $(temp).html();
        if (selected.indexOf("(+") != -1) {
            var selectedString     = selected.substring(selected.indexOf("(+")+1,selected.length-1);
            $(temp).html(selectedString);
        }
    });

score 0 · Answer 5 · answered Jul 07 '14 at 10:46

You can accomplish this task using HTML5 data attribute as below:

<select name="phoneCallingCode" id="phoneCallingCode" class="input" onclick="resetPhoneCallingCode()" onblur="displayContryCode();">
    <option value="93" data-text="Afghanistan (+ 93)">Afghanistan (+ 93)</option>
    <option value="355" data-text="Albania (+ 355)">Albania (+ 355)</option>
    <option value="213" data-text="Algeria (+ 213)">Algeria (+ 213)</option>
</select>

<script>
    function resetPhoneCallingCode() {
        $("#phoneCallingCode option").each(function () {
            $(this).text($(this).attr('data-text'));
        });
    }
    function displayContryCode() {
        $("#phoneCallingCode option:selected").text("+" + $("#phoneCallingCode").val());
    }
</script>

did you see OP's Edit :) ? – Pratik Joshi Jul 07 '14 at 11:08 — Pratik Joshi, Jul 07 '14 at 11:08

jquery show different value from the dropdown list

5 Answers5