How do I get p tag value in the select tag using jquery?

Question

1.00/5 (1 vote)

See more:

Here I have used jQuery. This code gives me output but I want output in a different way.

When I enter 5 digits in the input field, it gives me "one" in the select tag and "one, two, and four" in the p tag as my output.

Can I get like this if I click on "two" in the p tag, the value in the select tag should change into two? Can someone help me out?

What I have tried:

JavaScript

jQuery(document).keyup(function(){ 
        jQuery("#txtFirstNo").on("input", function() {
            jQuery("#selResult").val("");
               var arr = [];
            
            if ( jQuery(this).val().match(/^(\d{5})$/, '') ) {
                jQuery("#selResult").val("one");
            }
            else if ( jQuery(this).val().match(/^(\d{5})$/, '') ) {
                jQuery("#selResult").val("two");
            }
            else if ( jQuery(this).val().match(/^(\d{5})$/, '') ) {
                jQuery("#selResult").val("four");
            }
            else if ( jQuery(this).val().match(/^(\d{7})$/, '') ) {
                jQuery("#selResult").val("three");
            }
            
// for p tag
        
    if (jQuery("#txtFirstNo").val().match(/^\d{5}$/, '') )  {
            arr.push("one") ;
        }
    if ( jQuery("#txtFirstNo").val().match(/^\d{5}$/, ''))
        {
            arr.push("two");
        }
    if ( jQuery("#txtFirstNo").val().match(/^\d{5}$/, ''))
        {
            arr.push("four");
        }
    if ( jQuery("#txtFirstNo").val().match(/^\d{7}$/, ''))
        {
            arr.push("three");
        }
    
    jQuery("#txtPrint").html(arr.join("<br/>"));
    arr=[];
            
        });
});

HTML

<br> Tracking Number :

<br>
 Shipping Carriers :
      

  Select Carriers
  one
  two
  three
  four
  


<p id="txtPrint"></p>

Posted 4-Nov-20 0:53am

Member 14978380

Updated 9-Nov-20 1:54am

Richard Deeming

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2020-11-09T01:56:00

Not every HTML element can "validly" hold a value attribute in the normal sense. <input> and <select>, for examples, are made for it and are given value attributes by design.

Other elements are not made to hold a value. For elements like <p> or <div>, they're really used as containers to old things.

You have two options.
1 - If you want the content of the container you can get the innerHTML or innerText values. These contain the content within the element (text, HTML, CSS, etc.).
2 - I don't use jQuery - just straight javascript and the DOM. I can pretty much give any attribute to any HTML element - and I have used this ability to create custom attributes to store information (such as a many-to-many parent-child relationship with <select> elements). You could put a value= attribute in your element and retrieve it via: document.getElementById().getAttribute('value');

Now how and what jQuery allows you to do in this respect is up to you to discover. Recall, however, that javaScript still works on your page and you can use it!