The Javascript error message show str.replace is not a function-Twitter bootstrap

PiNetworkCrytocurrency
October 24, 2021
66 views
0 votes
2 Answers

I have a problem returning a string where the value "cheese" is replaced with "jam". My scenario is first starting with I default values of cheese and mushrooms to be selected. If I want to select Cheese,Tomatoes,Mushrooms, console log I need the value "cheese" is replaced with "jam", and the console log result should be "jam,tomatoes,mushrooms". When I clicked the check value button, the errors message show me str.replace is not a function in the console log.

Below is my sample coding:

$('#select_multiple').multiselect()
var data="cheese,mushrooms";
var dataarray=data.split(",");
$("#select_multiple").val(dataarray);
$("#select_multiple").multiselect("refresh");   

function check_value(){
    var str = $('#select_multiple').val();  
    var abc = str.replace("cheese", "jam"); 
    console.log(abc);
}

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />

</head>
<body>

<select id="select_multiple" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<button onclick="check_value();">Check Value</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>

I have tried to alert variable str to check values, it got values. Just cannot console log the values. Hope someone can guide me on how to solve this problem. Thanks.

Answers

That is because you are getting str as an array. You need to use for loop to replace the string that you want. see below example

$('#select_multiple').multiselect()
var data="cheese,mushrooms";
var dataarray=data.split(",");
$("#select_multiple").val(dataarray);
$("#select_multiple").multiselect("refresh");   

function check_value(){
    var str = $('#select_multiple').val(); 
    for(var i=0; i < str.length; i++) {
       str[i] = str[i].replace('cheese', 'jam');
      }    
      console.log(str)
}

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />

</head>
<body>

<select id="select_multiple" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<button onclick="check_value();">Check Value</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>

that’s because str is an array. that’s why you still have to iterate the variable…

$('#select_multiple').multiselect()
var data="cheese,mushrooms";
var dataarray=data.split(",");
$("#select_multiple").val(dataarray);
$("#select_multiple").multiselect("refresh");   

function check_value(){
    var str = $('#select_multiple').val();  
    const abc = []
    str.forEach((s) => {
      abc.push(s.replace("cheese", "jam"));   
    })
    
    
    console.log(abc);
}

<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />

</head>
<body>

<select id="select_multiple" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<button onclick="check_value();">Check Value</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.