onchange selected option change span text or number etc

 

onchange selected option change span text  or number etc

onchange selected option change span text  or number etc

Code:

<select id="mySelect">

    <option value="1">Monkey</option>

    <option value="2">Bear</option>

    <option value="3">Squirrel</option>

    <option value="4">Elephant</option>

</select>

<span id="mySpan">dd</span>

$(document).ready(function() {

    $("#mySelect").change(function() {

        $('#mySpan').html($(this).val());

    }).change();

});

Code Link:

https://codepen.io/zakimdb/pen/zZWRao?editors=1010

https://stackoverflow.com/questions/3245967/can-an-option-in-a-select-tag-carry-multiple-values

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange

Code 2 And All:

advcash.jpg
bitcoin.jpg
bKash.jpg
brac_bank.jpg
coinbase.jpg
ethereum.jpg
litecoin.jpg
neteller.jpg
payeer.jpg
paypal.jpg
payza.jpg
perfect_money.jpg
skrill.jpg

  <form class="buy-form" > 


  <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">Send Method</label>
    <div class="col-sm-8">
    <img id="imageSendMethod" class="profile" src="https://mythemeplugin.com/mylogo/bKash.jpg" style="width:30px;height:30px;" > 
    <select  onchange="$('#imageSendMethod').attr('src', this.options[this.selectedIndex].value);" > 
        
        <option value="https://mythemeplugin.com/mylogo/bKash.jpg" data-othervalue="bKash">bKash</option>
        <option value="https://mythemeplugin.com/mylogo/brac_bank.jpg" data-othervalue="brac bank">brac bank</option> 
      </select>  
       
    </div>
  </div>


  

  <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">Receive Method</label>
    <div class="col-sm-8">
    <img id="imageToSwap" class="profile" src="https://mythemeplugin.com/mylogo/skrill.jpg" style="width:30px;height:30px;" > 
    <select id="mySelect" onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);myFunction()"  > 
        <option value="https://mythemeplugin.com/mylogo/skrill.jpg">Skrill</option>
        <option value="https://mythemeplugin.com/mylogo/neteller.jpg">Neteller</option>
        <option value="https://mythemeplugin.com/mylogo/bitcoin.jpg">Bitcoin</option> 
      </select>  
       
    </div>
  </div>
  
 <input type="hidden" name="" value="80" id="value1">
 <!-- <input type="number" name="" id=""> -->

  <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">Send Amount TK</label>
    <div class="col-sm-8">
      <input type="number" class="form-control"   placeholder="TK" id="sum" readonly>
    </div>
  </div>

  <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">Receive Amount ($)</label>
    <div class="col-sm-8">
      <input type="number" class="form-control"  placeholder="$" id="value2"  value="" >
    </div>
  </div>


 
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">BKash Number </label>
    <div class="col-sm-8">
      <input type="number" class="form-control"  placeholder="01791711111"   value="" >
    </div>
  </div>



  <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">BKash TRX ID</label>
    <div class="col-sm-8">
      <input type="text" class="form-control"  placeholder="TrxID"   value="" >
    </div>
  </div>



  <div class="form-group row">
    <label for="inputPassword" id="demo" class="col-sm-4 col-form-label">Skrill Email</label>
    <div class="col-sm-8">
      <input type="email" class="form-control"  placeholder="yourmail@gmail.com"   value="" >
    </div>
  </div>

 

  <div class="form-group row">
    <label for="inputPassword" class="col-sm-4 col-form-label">Contact No.</label>
    <div class="col-sm-8">
      <input type="number" class="form-control"  placeholder="01791711111"  value="" >
    </div>
  </div>


 

</form>

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


<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;

if (x == "https://mythemeplugin.com/mylogo/skrill.jpg") {
    x =  "Skrill Email";
} else if(x == "https://mythemeplugin.com/mylogo/neteller.jpg") {
    x =  "Neteller Email";
}else if(x == "https://mythemeplugin.com/mylogo/bitcoin.jpg") {
    x =  "Bitcoin Email/Adds";
}

  document.getElementById("demo").innerHTML = x;
}
</script>
 
<script>
$(function(){
            $('#value1, #value2').keyup(function(){
               var value1 = parseFloat($('#value1').val()) || 0;
               var value2 = parseFloat($('#value2').val()) || 0;
               $('#sum').val(value1 * value2);
               
            });
         });
</script>

HOME